CODEWITHSUNDEEP
kendo-uikendo-datasourcekendo-observable
Spleenboy
Spleenboy

Reputation: 179

How do I set a value on a Kendo Observable when it is based on a remote datasource?

I need a default value for a field that I get from a datasource, and bind to that field using an observable. (That value can then be updated if needed by the user using a treeview). I can read the initial remote datasource, build the observable and bind the value to the field. I can then pop up a dialog, show a tree and return the values. What I cant seem to do is set the value of the observable because it is based on a datasource, and therefore seems to be a much bigger and more complicated json object which I am viewing in the console. I have also had to bind differently in order to get that working as well as shown below.

Below if just a snippet, but should give an idea. The remote data source returns just: {"name":"a name string"}

<p>Your default location is currently set to: <span id="repName" data-bind="text: dataSource.data()[0].name"></span></p>

<script>
    $(document).ready(function () {

    var personSource2 = new kendo.data.DataSource({
        schema: {
                model: {
                    fields: {name: { type: "string" }}
                }
            },
        transport: {
            read: {
                url: "https://my-domain/path/paultest.reportSettings",
                dataType: "json"
            }            
        } 
    });

    personSource2.fetch(function(){
    var data = personSource2.data();
    console.log(data.length);  // displays "1"
    console.log(data[0].name); // displays "a name string"

        var personViewModel2 = kendo.observable({
        dataSource: personSource2
        });

    var json = personViewModel2.toJSON();
    console.log(JSON.stringify(json)); 

    observName1 = personViewModel2.get("dataSource.data.name");
    console.log("read observable: "+observName1);

    kendo.bind($(''#repName''), personViewModel2);

    });

After a lot of playing around, I managed to get the value to bind using: data-bind="text: dataSource.data()[0].name" but I can't find this documented anywhere. Where I output the observable to the console, I get a great big object, not the simple observable data structure I was expecting. I suspect I am missing something fundamental here! I am currently just trying to read the observable above, but can't get it to return the string from the json source.

Upvotes: 0

Views: 669

Answers (1)

Spleenboy
Spleenboy

Reputation: 179

 personSource2.fetch(function(){
 var data = personSource2.data();
 console.log(data.length);  // displays "1"
 console.log(data[0].name); // displays "Jane Doe"

    var personViewModel2 = kendo.observable({
    dataSource: personSource2
    });

    var json = personViewModel2.toJSON();
    console.log(JSON.stringify(json)); 

    observName1 = personViewModel2.get("dataSource.data()[0].name");
    console.log("read observable: "+observName1);

    personViewModel2.set("dataSource.data()[0].name","Another Value");
    observName1 = personViewModel2.get("dataSource.data()[0].name");
    console.log("read observable: "+observName1);

    kendo.bind($(''#repName''), personViewModel2);

 });

Upvotes: 1

Related Questions