Databound Kendo Forms (MVVM) using jQuery ajax

Telerik offers several great modules in their Kendo UI package.  Unfortunately, I’ve found that the kendo datasource object is simply not well suited for binding forms.  However, the kendo view model is extendable and can easily accept data from a $.ajax call.

In the sample below, we’re pulling data from a simple webapi that returns a single json record.

The ajax is simple. First, we get the data from our endpoint.

 
//Retrieve the model data from the remote endpoint
         $.ajax({
             url: myEndpointURL,
             type: "GET",
             dataType: "json"
         });

 
That’s easy enough. Just having that in code will put the information for you. Now, we need Kendo to get it. That’s also easy. We just extend the viewmodel to include the returned data and then bind it, directly within the on-success of the ajax call:

 
//Retrieve the model data from the remote endpoint
         $.ajax({
             url: myEndpointURL,
             type: "GET",
             dataType: "json",
             success: function (model) {
                 // extend the viewModel with the response from the server
                 $.extend(viewModel, model);
                 // bind to the viewModel
                 kendo.bind(document.body, viewModel);
             }
         });

Once we have that data, we need to link it to the form using data-binds, like below:

So, what that’s going to do is pull in your data from any WebApi, drop it into an local object and populate your form. It’s very fast and slick, but there are limited tools for debugging. To save time, it is best to start with some pre-made scripts that function pefectly well, using mockjax. This way you can build a functioning form right off the bat without even having your service complete.

Here is a working sample: (click to open in new window)