One of the lesser talked about and yet really useful features of the Beta 2 release is the introduction of Kendo UI models and the concept of “syncing” with the Kendo UI DataSource.  It was mentioned briefly in the Beta 2 release announcement last week.

One of the components that got a lot of attention in Beta 2 is the Kendo UI Data Source. Already a very powerful component for helping you retrieve and bind to local and remote data, the beta 2 Data Source finally adds full support for syncing local data operations with the a remote server.

To enable that, Kendo UI introduces a rich new ability to define and work with models. These models are able to locally track their changes and then properly sync to the server.

Unfortunately, we don't have any demos for this new feature today, but stay tuned and we'll talk a lot more about this very useful improvement in the coming days and weeks.

Today we are able to show you both the models and the syncing with Kendo UI.

Models

The Kendo UI Model is the concept of a collection of objects which can be bound to the UI controls.  When this model changes, the UI controls will automatically reflect those changes through binding.  This eliminates the need for the developer to have to worry about handling the state of the view and concentrate on simply handling the data.  Kendo UI will handle the view for you.

Models are specified by defining a new model of the kendo.data.Model object.  Once the model is created, it just needs to know the “mapping” to the ID for each object.  Let’s assume our server will be giving us a set of products in a JSON response like this.

[{ "ID": 0, "Name": "Tea"}, { "ID": 1, "Name": "Coffee"}]
 

Creating the model is easy.  We just define the model with the “ID” field.  The “Name” attribute will be automatically mapped into the model and defined as a property by the Kendo UI DataSource.

var Product = kendo.data.Model.define({
     id: "ID"
});

DataSource

The Kendo UI DataSource and models work seamlessly with each other.  The DataSource can be defined with the URL location of the data.  In the “schema” of the DataSource, it is now possible to specify the model that we want to “push” the data into.

dataSource = new kendo.data.DataSource({
    transport: {
        read: "Home/Products"
    },
    schema: {
        model: Product
    }
});

Now we can bind to that DataSource with another Kendo UI widget.  For example, the Kend UI Grid.  The “data-field” maps the value from the DataSource to the appropriate column.

<table id="products"> <thead> <tr> <th data-field="ID">ID</th> <th data-field="Name">Name</th> </tr> </thead> </table>
$("#products").kendoGrid({
    dataSource: dataSource,
    height: 200,
    scrollable: false,
    selectable: true,
});
 

We’ve seen a bunch of code already so let’s see how this looks so far.

 

The DataSource is doing all of the work for us in terms of wiring up our grid.  At this point we could retrieve any of our model objects just by getting them from the DataSource by ID.

var model = this.dataSource.get(0);
console.log(model.get("Name"));
 
>> “Tea”
 

Let’s add some editing to this grid and see how the data syncing makes our lives quite a bit easier.

We’ll add a textbox below the grid where we can change the selected product “Name” when someone clicks on the row.  We’ll additionally add a button below that which we can click on to save the result.  If we attach a simple event listener to the “change” event on the grid, we can get the value of the “Name” column and then let the user alter it.

The following block of code does a few things.

  1. Gets the model object for the selected row (change event in the Kendo UI Grid is when the row selection changes).
  2. Populates the input field with the value of the “Name” property on the model object.
  3. Adds an event listener to the “change” event on the input box which in turn sets the value of the “Name” on the corresponding model object.
<dl> <dt>Name:</dt> <dd><input id="name" name="Name" /></dd> <dd><button id="sync">Sync</button></dd> </dl>
$("#products").kendoGrid({
    dataSource: dataSource,
    height: 200,
    scrollable: false,
    selectable: true,
    change: function() {
        var tr = this.select();
        var id = tr.data("id");
        var model = this.dataSource.get(id);

        $("dl input").val(model.get("Name"))
            .unbind("change")
            .change(function() {
                model.set(this.name, this.value);
        });
    }
});
 

By keeping the model in sync, the grid will automatically reflect any changes that we have made.  Without us having to tell the grid that we did anything at all.

You can see a working example of this here.. (the update may run a tad slow depending on how jsfiddle is responding)

 

DataSource Syncing

The DataSource additionally has a method called “sync”, which will call CRUD operations on the server for the changed data.  For instance, when we update the “Name” value for a model object, calling the dataSource.sync(); will send that update to the server.  The only thing we have to do is to tell the DataSource in it’s configuration what to do with an “Update”.

dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "Home/Products"
        },
        update: {
            url: "Home/Update",
            type: "POST"
        }
    },
    schema: {
        model: Product
    }
});
 

Here we tell the DataSource to call the “update” method on the server whenever the “sync” method is called.  It will automatically detect the update to the model and use the update strategy that we have defined here.  It then refreshes the binding of the grid to the DataSource thus updating the UI. 

All Together Now

Kendo UI Beta 2 takes another giant leap forward in helping you structure your code, organize your data, and keep your user interface in sync with the data changes.

This is just a surface level view of the power and flexibility provided when using the Kendo UI DataSource with Kendo UI widgets.  With Kendo UI, you no longer need references to disparate .js libraries with arbitrary dependencies.  Everything that you need to build feature rich web and mobile applications is right here.


Burke Holland is the Director of Developer Relations at Telerik
About the Author

Burke Holland

Burke Holland is a web developer living in Nashville, TN and the Director of Developer Relations at Telerik. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke works for Telerik as a Developer Advocate focusing on Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.