Kendo-Knockout: use a knockout view model with a kendo data source

Question

I am doing some experiments with the Kendo, Knockout, and kendo-knockoutjs libraries. I want to use a knockout view model with a kendo data source and bind it to a kendo grid widget.

In kendo:

HTML:

<div id="main"> <div id="reportGrid" data-bind="source: gridDataSource"></div> </div> 

JavaScript:

 var billingReportViewModel = kendo.observable({ gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]}) }); $("#reportGrid").kendoGrid(); kendo.bind($("#main"), billingReportViewModel); 

http://jsfiddle.net/zeQMT/71/

What I want to do:

html is the same as the above example.

JavaScript:

 var billingReportViewModel = ko.observable({ gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]}) }); $("#reportGrid").kendoGrid(); ko.applyBindings(billingReportViewModel); 

http://jsfiddle.net/zeQMT/72/

Obviuosly, this will not work because knockoutjs does not have a source binding. Is it possible to create a custom binding named source so that the current example works? Any help with working code would be greatly appreciated. Thanks!

Answer 1

I started the branch recently to handle the direct transfer in the kendo.data.DataSource link, but never completed the fix: https://github.com/rniemeyer/knockout-kendo/issues/6

If there is interest, I can try to solve this problem.

Otherwise, you can define the data source in the binding (or pass an object). How:

 var billingReportViewModel = ko.observable({ gridDataSource: {data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]} }); 

Then bind as:

 <div id="reportGrid" data-bind="kendoGrid: { data: undefined, dataSource: gridDataSource }"></div> 

Example: http://jsfiddle.net/rniemeyer/6SEzp/