Kendo-Knockout: use knockout view model with kendo datasource

Question

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!

RP Niemeyer RP Niemeyer · Accepted Answer · 2012-12-18T16:00:44

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/

Kendo-Knockout: use knockout view model with kendo datasource

1 Answers