Kendo-knockoutjs integration

Question

I am developing a POC for upcoming web application we have to work on for like 2 years of development and right now I am struggling to take a decision on KendoUI MVVM bindings and KnockoutJS bindings.

I have developed two POCs using two technologies and here are sample code.

KendoUI MVVM binding for Grid

<table id="kendoUiGridMvvmTest" height="600px" width="1153px">
<tr>
    <td>
        <h4>KendoUI Grid - Native MVVM Implementation</h4>
        <div data-role="grid"
            data-sortable="true" data-source='{"schema":{"model":{"fields":{"Name":{}, "Price":{"type":"number"}, "UnitsInStock":{"type":"number"}}}}}' data-filterable="true" data-editable="true" data-groupable="true" data-scrollable="true" data-selectable= "multiple cell"
    data-resizable="true"
    data-reorderable="true" data-pageable='{ "pageSize": 10 @*events: {change: onPage}*@}'
            data-columns='[{"field":"Name", "filterable":true}, {"field":"Price", "filterable":false}, "UnitsInStock", {"command": "destroy"}]'
            data-bind="source: gridSource"></div>
    </td>
</tr>

Here is the ViewModel code.

var viewModel = kendo.observable({
    gridSource: [
        { Name: "Item1", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item2", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item3", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item4", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item5", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item6", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item7", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item8", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item9", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item10", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item11", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item12", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item13", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item14", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item15", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item16", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item17", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item18", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item19", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item20", Price: 97.00, UnitsInStock: 29 }
    ],


});


kendo.ui.Grid.fn.options.filterable = false;
kendo.bind($("#kendoUiGridMvvmTest"), viewModel);

This code works perfect and I can show the data in my Kendo Grid.

But what I want to do is to Bind data to the Kendo Grid using a KnockoutJS ViewModel. So I want a code like this.

var viewModel = {
    gridSource: [
        { Name: "Item1", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item2", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item3", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item4", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item5", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item6", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item7", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item8", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item9", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item10", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item11", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item12", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item13", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item14", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item15", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item16", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item17", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item18", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item19", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item20", Price: 97.00, UnitsInStock: 29 }
    ],


};

ko.applyBindings(viewModel);

Here you can see I have used ko.applyBindings instead of kendo.bind

So, in simple terms what I want is to bind KnockoutJS model to KendoUI Grid without using KendoUI's MVVM bindings.

I have found an knockout to kendoUI integration here, but it does not work for my grid. Any comments are welcome.

Thanks in advance.

Check out these KO bindings for Kendo UI: rniemeyer.github.com/knockout-kendo — RP Niemeyer
@RPNiemeyer Sir, I have already used your knockout-kendo library. I have done a POC for app using knockout-kendo.js. Actually our main concern here is about the support we would get on Knockout-Kendo.js library. Therefore, how about the future releases of Knockout-kendo.js library? will it provide future support as KendoUI provides new UI Widgets? Thank you sir. — Thilok Gunawardena
The library is written in a way that it is easy to add new widgets that follow the same pattern as previous widgets, so it is not hard to add new widgets. As far as support and enhancements go, it is an open source project, so people can submit pull requests and I try my best to provide support. With that said, obviously the Kendo folks are paid to work on Kendo UI, so they likely have way more time to dedicate to it. It can work both ways though, they might prioritize something low and plan to get to it in the next year, where with an open source project it might happen today (or not). — RP Niemeyer
The Kendo folks have chosen a path of building their own widgets from scratch and their own MVVM and binding library. I love their widgets, but I would not bet on hem putting resources on building on that integration with other libraries. If you want to use Kendo and KO, your best bet is to use Ryan's library and help contribute to it as new widgets appear. — John Papa
I used Ryan's library for a real project. Works well for most things, but I soon encountered binding scenarios it didn't support well (one example is selected row on a grid) so you have to develop your own mods for it. I've also encountered some performance and memory leak issues with kendo controls when using in conjunction with knockout mvvm. — Andrew Stakhov

Srikanth Venugopalan Srikanth Venugopalan · Accepted Answer · 2013-03-08T01:36:59

A bit late to the party, but here is a fiddle that I played with, using your data

http://jsfiddle.net/Q4hGe/2/

The data-bind now looks like this

data-bind="kendoGrid: { data: gridSource, columns: [{'field':'Name', 'filterable':true}, {'field':'Price', 'filterable':false}, 'UnitsInStock', {'command': 'destroy'}], scrollable: false, sortable: true, pageable: false }">

Kendo-knockoutjs integration

1 Answers