Morris Development

Custom System Development and Integration

Databound Kendo Forms (MVVM) using Kendo DataSource Object

While many prefer to utilize jQuery’s $.ajax features to pull data into a Kendo MVVM form, it is sometimes just as efficient to pull that data into the form using Kendo’s DataSource object. It is a bit difficult to debug, but the flexibility it offers when utilizing multiple data sources can sometimes make the initial difficulty worth the effort.

The primary benefit, I have found, is that the time-cost of a developer trying to figure out where you’ve brought data into the object is reduced if it is placed in a standardized structure. In this case, Kendo’s DataSource is much more clear than using jQuery to populate the observable object.

This article will detail how this is done and include a working sample.

Databound Kendo Forms (MVVM) using jQuery ajax

To most effectively manage data retrieved via WebApi, it is best to use data-bound objects. By doing this, you can manage an HTML form just as effectively as a c# model. Kendo’s viewmodel can bind a form exactly like KnockOut, letting an entire JSON result set be bound to the objects on the page. Unfortunately, Kendo’s datasource object is a bit awkward and has given us a lot of grief. We’ve found that jQuery’s $.ajax method is much easier to work with.

Nested Grids in Kendo UI

While a simple grid generally does the trick, sometimes we need to break things down into more detail. One of the biggest problems we’ve had is making nested grids. We found a great sample that we’ve used as a base for some of our more complex pages.