Grid Overview
Edit this docThe Grid widget displays tabular data and offers rich support interacting with data,
including paging, sorting, grouping, and selection. Grid is a powerful widget with
many configuration options. It can be bound to local JSON data or to remote data
using the Kendo DataSource component.
Getting Started
There are two primary ways to create a Kendo Grid:
- From an existing HTML table element, defining columns, rows, and data in HTML
- From an HTML div element, defining columns and rows with configuration, and binding to data
<!-- Define the HTML table, with rows, columns, and data -->
<table id="grid">
<thead>
<tr>
<th data-field="title">Title</th>
<th data-field="year">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars: A New Hope</td>
<td>1977</td>
</tr>
<tr>
<td>Star Wars: The Empire Strikes Back</td>
<td>1980</td>
</tr>
</tbody>
</table>
The Grid data field names are either created from the header cell content or the data-field attributes.
The data field names should be valid Javascript identifiers, that's why using data-field attributes is highly recommended.
Otherwise there would be limitations imposed on the header cell content (e.g. no special characters and spaces).
$(document).ready(function(){
$("#grid").kendoGrid();
});
<!-- Define the HTML div that will hold the Grid -->
<div id="grid">
</div>
$(document).ready(function(){
$("#grid").kendoGrid({
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});
Kendo Grid supports paging, sorting, grouping, and scrolling. Configuring any of
these Grid behaviors is done using simple boolean configuration options. For
example, the follow snippet shows how to enable all of these behaviors.
$(document).ready(function(){
$("#grid").kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
});
By default, paging, grouping, and sorting are disabled. Scrolling is enabled by default.
When binding to large data sets or when using large page sizes, reducing active in-memory
DOM objects is important for performance. Kendo Grid provides built-in UI virtualization
for highly optimized binding to large data sets. Enabling UI virtualization is done via simple configuration.
$(document).ready(function(){
$("#grid").kendoGrid({
scrollable: {
virtual: true
}
});
});
You can reference an existing Grid instance via jQuery.data().
Once a reference has been established, you can use the Grid API to control its behavior.
var grid = $("#grid").data("kendoGrid");