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.