Use Grid in Kendo UI SPA Application

The following example demonstrates how to initialize a Grid widget in a Single-Page Application (SPA).

Example

  <div id="app"></div>

    <script id="grid-view" type="text/x-kendo-tmpl">
    <div class="manage-roles">
      <div data-role="grid"
      data-scrollable="true"
      data-editable="inline"
      data-columns='[
        { field : "JobTitle", width: 120, title : "Job Title Code" },
        { field : "Description" },
        { field : "CategoryId", template: "${Category}" },
        {"command": "edit"}]'
      data-bind="source: roles"
      style="height: 500px">
      </div>
      </div>
    </script>

    <script>
      var roleViewModel = kendo.observable({
        categories: new kendo.data.DataSource({
          data: [
            { "CategoryId": 1, "Description": "IT" },
            { "CategoryId": 2, "Description": "Billing" },
            { "CategoryId": 3, "Description": "HR" },
            { "CategoryId": 4, "Description": "Sales" },
            { "CategoryId": 5, "Description": "Field" },
            { "CategoryId": 10, "Description": "Stuff" },
            { "CategoryId": 11, "Description": "Unassigned" }
          ]
        }),
        roles: new kendo.data.DataSource({
          data: [
            { "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
            { "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
            { "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
            { "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
          ]
        })
      });

      var categoryEditor = function(container, options) {     
        $('<input data-bind="value: ' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
          dataSource: roleViewModel.categories,
          dataTextField: 'Description',
          dataValueField: 'CategoryId'
        });
      };

      var view = new kendo.View($("#grid-view").html(), {
        model: roleViewModel,
        init: function() {
          var widget = this.element.find("[data-role=grid]").data("kendoGrid");

          widget.columns[2].editor = categoryEditor;
        }

      });

      var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

      layout.render($("#app"));

      layout.showIn("#content", view);
    </script>

See Also

• JavaScript API Reference of the Grid
• How to Add Cascading DropDownList Editors
• How to Copy Data from Excel
• How to Drag and Drop Rows between Grids
• How to Enable ForeignKey Column Sorting by Text
• How to Implement Stable Sort in Chrome
• How to Initialize Data Attribute with Detail Template
• How to Load and Append More Records While Scrolling Down
• How to Perform CRUD Operations with Local Storage Data
• How to Persist Expanded Rows after Refresh
• How to Set Cell Color Based on ForeignKey Values
• How to Show Tooltip for Column Records
• How to Update Toolbar Content Using MVVM Binding

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.