Kendo UI Cookbook: Over 50 recipes to help you rapidly build rich and dynamic user interfaces for web and mobile platforms.

The Kendo UI library comes with a powerful Grid component. A Grid component is very useful when you want to display tabular data and provide various functionalities, such as sorting based on a selected column, filtering data, using pagination, and editing the tabular data. The Kendo UI Grid component provides various configuration options to customize the way the Grid is displayed and also provides various APIs to manipulate the Grid's content.

A Grid in Kendo UI can be created in the following two ways:

In this recipe, we will take a look at the first approach, that is, creating a Grid using an existing HTML table element.

<table id="grid">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>Full Name</th>
      <th>Year of Joining</th>
      <th>Designation</th>
      <th>Extension No.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>Sagar H Ganatra</td>
      <td>2008</td>
      <td>Software Architect</td>
      <td>49523</td>
    </tr>
    <tr>
      <td>7008</td&gt...

A Grid component can be created using the data present in the page or by referring to model data, that is, data in the JSON format. The Kendo UI library provides a DataSource component that can be used to store a model data. The DataSource component can be bound to a local data source or to a remote service that returns data in either the XML or JSON format.

<div id="grid">
        
</div>

$("#grid").kendoGrid({
  columns: [
    {
      field : 'movieName',
      title : 'Movie'
    },
    {
      field : 'year',
      title : 'Year'
    },
    {
      field : 'rating',
      title : 'Rating'
    }
  ],  
  dataSource: [
    {
      movieName : 'The Shawshank Redemption...

The Kendo UI Grid comes with several features, such as sorting by selected columns, pagination, grouping, and scrolling. These configuration options can be specified at the Grid configuration level and at the column level as well.

$("#grid").kendoGrid({
  columns: [
    {
      field : 'movieName',
      title : 'Movie',
      sortable: false,
    },
    {
      field : 'year',
      title : 'Year' 
    },
    {
      field : 'rating',
      title : 'Rating'
    }
  ],  
  dataSource: {
    transport: {
      read: 'http://localhost/kendo/code/chapter2/remote.json'
    }
  },
  sortable: true
});

Similar to sorting columns in a Grid, you can update the Grid content by applying a filter. By applying a filter on the column, users will be able to search relevant data in the Grid that matches some criteria.

filterable: true

How it works…

When you mark the columns for filtering, you will see a filter icon for each of the columns in the Grid.

When you click on it, you will be presented with a set of options that will allow you to get filtered data.

By default, users will be presented with two conditions to enter in the search criteria. In this example, the user has selected...

Editing the records right within the Grid is another common task. The Kendo UI Grid allows users to edit the content in the Grid, which is similar to editing the cells in an Excel sheet. There are two modes, inline and popup, in which a single row in a Grid can be edited. The inline editing turns the cell into a text-input field and provides options to update the record. In the popup editing, a pop up that contains the same fields is shown, and it allows users to save the selected record.

In addition to editing rows in the Grid, the library also allows you to delete and add records to the Grid. These actions—Create, Read, Update, and Delete—are mapped to a remote service that can process these requests. A common paradigm used in web development is to provide a RESTful web service. A RESTful service provides a single endpoint URL and provides resources that get invoked based on the http method mentioned in the request.

Consider a scenario wherein the service returns a large dataset that needs to be displayed in the Grid. For example, say the dataset has about 10,000 records. As explained earlier, a table row is created for each record in the DataSource object. In this case, there are 10,000 records, and creating a table row (tr) for each record would make the browser run out of memory. Creating 10,000 DOM nodes and then appending the same into the document tree would consume a lot of memory. One way to tackle this problem is to use virtualization. In virtualization, only a fixed set of nodes are created and when the user scrolls over the Grid, the existing nodes are updated to show the next set of records in DataSource. This way, we not only optimize the use of the browser memory by reusing the DOM node, but we also provide a smooth experience to the user while scrolling through a massive list.

In this recipe, we will look at how we can customize the look and feel of the rows by using a template. We will also look at the reordering and resizing of columns in the Grid.

<script id="gridRowTemplate" type="text/x-kendo-tmpl">
  <tr>
    <td class="details">
      <span class="movieName"><h3>#: movieName #</h3></span>
      <span class="rating">Rating : #: rating#</span>
    </td>
    <td class="year">
      <h3>#: year #</h3>
    </td>
  </tr>
</script>