DataSource Syncing And Models In Beta 2

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.

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.