CODEWITHSUNDEEP
javascriptknockout.jskendo-ui
Thilok Gunawardena
Thilok Gunawardena

Reputation: 924

Kendo-knockoutjs integration

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.

Upvotes: 2

Views: 1529

Answers (1)

Srikanth Venugopalan
Srikanth Venugopalan

Reputation: 9049

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 }">

Upvotes: 1

Related Questions