Databases
StackOverflow2013
Postsdbo
POKendo-knockoutjs integration
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendo-knockoutjs integration
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USthilok
    1. USthilok
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKendo-knockoutjs integration
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POKendo-knockoutjs integration
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCheck out these KO bindings for Kendo UI: http://rniemeyer.github.com/knockout-kendo/
      singulars
      1. POKendo-knockoutjs integration
      1. USRP Niemeyer
    2. CO@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.
      singulars
      1. POKendo-knockoutjs integration
      1. USthilok
    3. COThe 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).
      singulars
      1. POKendo-knockoutjs integration
      1. USRP Niemeyer
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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