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

[Paul]

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.

[Petar]

Hello Paul,

Thank you for the provided code snippet and the details. 

When using a more complex dataSource, the way a data could be bound is the one used in the provided code snippet. To make the HTML data-bind definition more readable, a temporary observable object could be used and using the set method we could set the values we want in the new temporary observable object and then bind this object to the desired HTML element. 

To directly answer your question the linked above set method is the one with which we can set a value to a Kendo observable. 

Here is a Dojo demonstrating both:

• how we can use a temporary object and bind it to an element. 
• and how we can directly set a value in a given dataSource.

To make the example more clear, I've added a defaultValue field to the dataSource and this field is the one which value is being set/changed in the Dojo project. 

Please, check the Dojo project and the description above and let me know if the provided information helps you resolve the reported issue or if you have any questions regarding the implementation. 

Looking forward to your reply. 

Regards,
Petar
Progress Telerik

[Paul]

That's great thanks: I am almost there. I think a had some double quotes missing, and a method in the wrong place.

I am using this as my test fetch function for my remote datasource, and everything works and outputs as expected.

 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);
        
    });

 

One last question. I now need to set this observable through user interaction with a different Kendo Component on the same page but in a different script section of the page ( a tree view displayed in a modal).

I thought I could reference the observable like this:

$("#personViewModel2").set("dataSource.data()[0].name","List Value");

but get the error: TypeError: $(...).set is not a function

 

[Petar]

Hello Paul, 

We cannot reference the personViewModel2 using the proposed approach. 

Here is a demo which demonstrates how we can set the first element of a TreeView after a user interaction - click on a button. What we do is to take a reference to the TreeView and its DataSource and then using the set method to change the text value of the [0] element in the DataSource.

 

Please check the demo and let me know if the proposed solution helps you to resolve the issue. If not I would like to ask you for a runnable project where the used elements are presented.

Looking forward to your answer.

Regards,
Petar
Progress Telerik