Databases
StackOverflow2013
Postsdbo
POKendo-knockoutjs integration
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendo-knockoutjs integration
    text
    copied!<p>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.</p> <p>I have developed two POCs using two technologies and here are sample code.</p> <p>KendoUI MVVM binding for Grid</p> <pre><code>&lt;table id="kendoUiGridMvvmTest" height="600px" width="1153px"&gt; &lt;tr&gt; &lt;td&gt; &lt;h4&gt;KendoUI Grid - Native MVVM Implementation&lt;/h4&gt; &lt;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"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p></p> <p>Here is the ViewModel code.</p> <pre><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); </code></pre> <p>This code works perfect and I can show the data in my Kendo Grid.</p> <p>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.</p> <pre><code>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); </code></pre> <p>Here you can see I have used <code>ko.applyBindings</code> instead of <code>kendo.bind</code></p> <p>So, in simple terms what I want is to bind KnockoutJS model to KendoUI Grid without using KendoUI's MVVM bindings.</p> <p>I have found an knockout to kendoUI integration <a href="http://demos.kendoui.com/web/integration/index.html" rel="nofollow">here</a>, but it does not work for my grid. Any comments are welcome.</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload