Grid Overview

The Kendo UI Grid widget is a powerful control for displaying data in a tabular format. It provides many options, such as paging, sorting, filtering, grouping, and editing, which determine the way data is presented and manipulated. The Grid can be bound to local or remote data by using the Kendo UI DataSource component.

Getting Started

Read in Advance

Because of the numerous functionalities it supports, the Grid is the most complex of the Kendo UI widgets so far. To gain greater confidence before you start working with it, make sure you get familiar with the following concepts:

  • DataSource—The DataSource is one of the pivotal Kendo UI components. It is an abstraction for using local or remote data and a key concept in understanding how the Grid functions.
  • Remote CRUD Operations—The section elaborates on scenarios, in which data is retrieved from and submitted to a remote data service through HTTP requests made by the Kendo UI DataSource.
  • Remote Data Binding—The article provides information on server filtering, paging, and other features of the Grid.
  • Kendo UI Editing Functionality—The editing functionality in some Kendo UI widgets, including the Grid, is implemented with a specific editor element or form that is bound to the model by using the Kendo UI MVVM bindings.

Initialize the Grid

Use either of the two primary approaches to create Kendo UI Grids:

  • From an empty <div> element.
  • From an HTML table.

From an Empty div

When you initialize the Grid from an empty <div> element, all Grid settings are provided in the initialization script statement. This means that you have to describe the layout and configuration of the Grid in JavaScript.

// define the HTML div that will contain the Grid
<div id="grid"></div>

// initialize the Grid

            columns: [{
                field: "FirstName",
                title: "First Name"
                field: "LastName",
                title: "Last Name"
            dataSource: {
                data: [{
                    FirstName: "Joe",
                    LastName: "Smith"
                    FirstName: "Jane",
                    LastName: "Smith"


From an HTML Table

When you initialize the Grid from an HTML table, some of its settings can be inferred from the table structure and the HTML attributes of the elements. This means that you can describe the layout of the Grid entirely in the HTML of the table.

The HTML table is usually already populated with data. This improves the accessibility and search engine optimization, and ensures that the user will see data even if JavaScript is disabled or there is a JavaScript error on the page.

// define the HTML table with rows, columns, and data
<table id="grid">
        <col />
        <col style="width:100px" />
            <th data-field="title" data-filterable="false">Title</th>
            <th data-field="year" data-type="number" data-template="<strong>#=year#</strong>">Year</th>
            <td>Star Wars: A New Hope</td>
            <td>Star Wars: The Empire Strikes Back</td>

// initialize the Grid

        sortable: true,
        filterable: true



The Grid uses a Kendo UI DataSource instance even when the widget is created from an HTML table. The content of the cell is extracted and populates the DataSource in the following way:

  1. The names of the data fields in the DataSource are either created from the content of the header cells or from the data-field attributes of the header cells.
  2. The names of the data fields have to be valid JavaScript identifiers. Therefore, it is recommended to use the data-field attributes. Otherwise the cell content of the header has to meet the following requirements:
    • No spaces
    • No special characters
    • The first character has to be a letter

If the Grid is created from an HTML table, but the DataSource is configured to use transport and remote operations, a remote request is made for the initial Grid state even though the table might be already populated. This behavior is defined by design and cannot be avoided, except when using the MVC wrapper of the Grid.

When the Grid is created from an existing table, you can define the following column settings through the HTML attributes:

  • The id attributes define the id of the columns.
  • The data-field attributes define the names of the data fields.
  • The width styles when applied to the respective <col> elements set the width of the columns.
  • The data-type attributes define the data types.
  • The data-template attributes set the column templates.
  • The data-menu attributes enable or disable the column menu.
  • The data-sortable attributes enable or disable sorting.
  • The data-filterable attributes enable or disable filtering.
  • The data-groupable attributes enable or disable grouping.
  • The data-index attributes define a zero-based number indicator for the columns.

Except for the width column styles, all attributes have to be applied to the <th> elements.


To associate the aria-describedby attribute of the cells to the corresponding column header in a navigatable Kendo UI Grid, define the id and data-index attributes for each <th> element.

It is not possible to define other column-related settings through HTML attributes in the <table>. If you have to use settings, such as commands, locking, editors, custom rows, cell CSS classes, and others, skip the above attribute configuration and include all settings in the JavaScript initialization statement of the Grid. Note that you have to set the column properties through the data-columns attribute when using the declarative widget initialization.

As the above code snippets demonstrate, the client object of the Grid is attached to a <div> in the first case and to a <table> in the second case. However, the generated HTML output of the Grid entirely depends on the settings of the widget and it will always be the same, regardless of the way the widget is initialized.


Existing Instances

Refer to an existing Grid instance through the Once a reference has been established, use the Grid API to control its behavior.

The following example demonstrates how to access an existing Grid instance.

var grid = $("#grid").data("kendoGrid");

See Also

In this article
Not finding the help you need? Improve this article