Kendo UI Web中的Grid控件不僅可以顯示數據，并對數據提供了豐富的支持，包括分頁、排序、分組、選擇等，同時還有著大量的配置選項。使用Kendo DataSource組件，可以綁定到本地的JSON數據或者是遠程的數據。

創建Kendo Grid：

1. 從現有的HTML表格元素中，用HTML定義組、行、和數據。
2. 從 HTML div 元素中，用配置定義列和行，并綁定到數據。

從現有的HTML表格元素創建Kendo Grid：

<!-- 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>

初始化Kendo Grid

$(document).ready(function(){ $("#grid").kendoGrid(); });

從 HTML div 元素中創建網格

<!-- Define the HTML div that will hold the Grid --> <div id="grid"> </div>

初始化Kendo Grid并配置列 & 數據綁定

  $(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分頁、排序、分組和滾動，使用簡單的布爾配置選項就可以配置任意的網格操作。啟用網格分頁、排序、分組和滾動操作，在默認的情況下這些操作都是禁用的，之后滾動在默認的情況下是啟用的：

 $(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
  });

虛擬滾動性能

    當綁定到大型數據集或使用大的頁面尺寸時，對于性能來說減少在內存中的DOM對象是非常重要的。Kendo Grid對于高度優化綁定到大數據集綁定提供內置的UI virtualization，通過簡單的配置就可以啟用。

啟用Grid UI virtualization：

  $(document).ready(function(){
      $("#grid").kendoGrid({
         scrollable: {
             virtual: true
         }
      });
  });

訪問現有的網格：

通過jQuery.data()可以引用一個現有的網格實例，一旦建立了引用，就可以使用Grid API來控制它的操作。

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

>>>Kendo UI Web下載