Declarative Initialization of the Kendo UI Grid

[Brett]

Hello all,

I just wanted to share information on how you can perform declarative initialization of the Kendo UI Grid. There was no example in the documentation, but there were several clues given by the developers on how it could be done. This sort of technique is really helpful if you want to data-bind the ObservableArray property of an ObservableObject to your view when calling kendo.bind(). In the Model below, the Invoices property returns a collection of invoices; hence, it is an ObservableArray when the data is retrieved from the server.

var entityModel = kendo.data.Model.define({

  id: 'Id',

  fields: {

    Id: { editable: false, defaultValue: '00000000' },

    Name: {},

    Invoices: {

      Approved: { type: 'date' },

      Completed: { type: 'date', defaultValue: null },

      Type: { type: 'number' }

    }

  }

});

Here is the declarative initialization of the Grid:

<table id="invoices" data-role="grid" data-toolbar="[{ name: 'create', text: 'Add new invoice'}]"

            data-editable="inline" data-bind="source: Invoices"

            data-columns="[{field: 'Type', template: '#= app.invoiceTypes[Type].name #',

              editor: function (container, options) {

                $('<select></select>').appendTo(container).kendoDropDownList(); }},

              {field: 'Approved', format: '{0:dd MMM yyyy}'},

              {field: 'Completed', format: '{0:dd MMM yyyy}'},

              {command: 'edit'}]">

</table>

The rows of the Grid are auto-generated if there is data present, just as you would expect. There are still some quirks I need to work out with the way it refreshes itself when the command buttons are clicked, but this is the general idea.

Cheers!

[Rosen]

Hello Brett,

An example of how to bind a Grid widget using our MVVM solution can be found here.

All the best,
Rosen
the Telerik team