The 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:

1. From an existing HTML table element, defining columns, rows, and data in HTML
2. From an HTML div element, defining columns and rows with configuration, and binding to data

Configuring Grid Behavior

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.By default, paging, grouping, and sorting are disabled. Scrolling is enabled by default.

Performance with Virtual Scrolling

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.

No code

$(".t-grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '<#= kendo.toString(BirthDate,"dd MMMM yyyy") #>'
        }
     ]
  });

var sharedDataSource = new kendo.data.DataSource({
     data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
     pageSize: 1
});
$("#grid").kendoGrid({
     dataSource: sharedDataSource
 });
 //or
 $("#grid").kendoGrid({
     dataSource: {
         data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
         pageSize: 1
     }
 });

//template
 <script id="rowTemplate" type="text/x-kendo-tmpl">
     <tr>
         <td>
             <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
         </td>
         <td>
             ${ Name }
         </td>
         <td>
             ${ AverageRating }
         </td>
     </tr>
 </script>
 //grid intialization
 <script>
     $("#grid").kendoGrid({
         dataSource: dataSource,
         rowTemplate: kendo.template($("#rowTemplate").html()),
         height: 200
     });
 </script>

$("#grid").kendoGrid({
     scrollable: {
         virtual: true //false
     }
 });