Kendo UI: Can I use a DataSource to sync data with standard HTML elements

Question

I am having trouble combining two kendo ideas that I have found individual examples for, but no combined example as of yet.

I have a page with simple HTML elements (textboxes, dropdowns, etc). I have used this kendo example to link the view to a viewmodel.

http://demos.telerik.com/kendo-ui/mvvm/elements

Everything here works fine. I can update the view, change values and see everything reflected in the viewmodel.

I have a remote service that is responsible for this data. I followed this kendo example to create a DataSource for this remote.

http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage

I have a read and update transport defined (as these are the only ones I need), and I have a schema defined for the data, with a valid id. All of this works as well. When I manually call read, the DataSource issues a read request to the service, and the data is returned.

I have seen plenty of examples of binding data sources to kendo grids, dropdowns, etc. I cannot figure out how to bind the returned data from my data source to the elements from my page.

I can't even seem to hack something together by exploring with Chrome dev tools, though in the end I'd like more than a hack. I'm hoping, whatever the solution may be, that it will scale for the entire site I'm working on.

What is the best way to do this? I feel like I am misunderstanding something about how this is supposed to work.

Answer 1

On your first link to kendo dojo ,inside the viewModel i create a function that contains ajax call to retrieve value from backend

getData: function () {
$.ajax({
    url: "http://demos.telerik.com/kendo-ui/service/Products", //replace this with your url to get the data from backend
    type: "GET",
    dataType: "jsonp" // replace this with the type suit your need maybe json or etc (just use this as example to fire the success event

}).success(function (data) {
    //asumme this dummy data is the data coming from backend
    var dummyData = {
        textValue: "new Text value",
        textareaValue: "new Textarea value",
        checkboxValue: true,
        radioValue: "new Apple",
        checkboxListValue: ["Banana"],
        multipleSelectValue: ["Banana"],
        fruits: ["Apple", "Banana", "Orange"],
        selectValue: "Orange"
    };
    //set the viewModel value with the data coming from backend
    viewModel.set("textValue", dummyData.textValue);
    viewModel.set("textareaValue", dummyData.textareaValue);
    viewModel.set("checkboxValue", dummyData.checkboxValue);
    viewModel.set("radioValue", dummyData.radioValue);
    viewModel.set("checkboxListValue", dummyData.checkboxListValue);
    viewModel.set("multipleSelectValue", dummyData.multipleSelectValue);
    viewModel.set("selectValue", dummyData.selectValue);

    //after you set the value, because the viewModel already bind with the component/value of the kendo widget on the HTML side the textbox/dropdown/checkbox will automatically updated
});

}

I also created a button on the html to trigger the getData function

<tr>
    <td><span data-role="button" data-bind="events:{click:getData}" />
         <h4>Click this to do ajax call </h4>
    </td>
</tr>

see this dojo, click on the button and you'll see the data updated from (text value to new text value)