This is a migrated thread and some comments may be shown as answers.

Declarative Initialization of the Kendo UI Grid

1 Answer 283 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 20 Dec 2012, 09:39 PM
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!

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 21 Dec 2012, 08:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Brett
Top achievements
Rank 2
Answers by
Rosen
Telerik team
Share this question
or