Kendo-Knockout: use knockout view model with kendo datasource
kendo-ui, knockout.js
Solution
I started a branch quite a while ago to handle passing in a kendo.data.DataSource reference directly, but never completed the fix: https://github.com/rniemeyer/knockout-kendo/issues/6
If there is interest, then I could try to get this one resolved.
Otherwise, you can define the dataSource in the binding (or pass in an object). Like:
var billingReportViewModel = ko.observable({
gridDataSource: {data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]}
});
Then, bind like:
<div id="reportGrid" data-bind="kendoGrid: { data: undefined, dataSource: gridDataSource }"></div>
Sample: http://jsfiddle.net/rniemeyer/6SEzp/
Problem
I am doing some experiments with Kendo, Knockout and kendo-knockoutjs libraries. I want to use knockout view model with kendo datasource and to bind it to the 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 accomplish: The html is the same as the example above. 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 `source` binding. Is it possible to create custom binding named `source` so that the current example will work? Any help with working code will be greatly appreciated. Thanks!