劍道網格 - 如何記住選定的行？

Question

http://dojo.telerik.com/eWakO Kendo Grid - 這裏我應該如何修改上面的代碼來記住選定的行？例如，如果我在第1頁上突出顯示第4行，然後滾動到頁面並返回到第1頁，則應突出顯示第4行。

感謝 Datha

Answer 1

下面是從文檔的例子：

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/persist-row-selection-while-paging

它依賴於change和dataBound事件保存，並通過它們的ID恢復選定的行。

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

<script> 

    $(function() { 

    var selectedOrders = []; 
    var idField = "OrderID"; 

    $("#grid").kendoGrid({ 
     dataSource: { 
     type: "odata", 
     transport: { 
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders" 
     }, 
     schema: { 
      model: { 
      id: "OrderID", 
      fields: { 
       OrderID: { type: "number" }, 
       Freight: { type: "number" }, 
       ShipName: { type: "string" }, 
       OrderDate: { type: "date" }, 
       ShipCity: { type: "string" } 
      } 
      } 
     }, 
     pageSize: 10, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true 
     }, 
     height: 400, 
     selectable: "multiple", 
     pageable: { 
     buttonCount: 5 
     }, 
     sortable: true, 
     filterable: true, 
     navigatable: true, 
     columns: [ 
     { 
      field: "ShipCountry", 
      title: "Ship Country", 
      width: 300 
     }, 
     { 
      field: "Freight", 
      width: 300 
     }, 
     { 
      field: "OrderDate", 
      title: "Order Date", 
      format: "{0:dd/MM/yyyy}" 
     } 
     ], 
     change: function (e, args) { 
     var grid = e.sender; 
     var items = grid.items(); 
     items.each(function (idx, row) { 
      var idValue = grid.dataItem(row).get(idField); 
      if (row.className.indexOf("k-state-selected") >= 0) { 
       selectedOrders[idValue] = true; 
      } else if (selectedOrders[idValue]) { 
       delete selectedOrders[idValue]; 
      } 
     }); 
     }, 
     dataBound: function (e) { 
     var grid = e.sender; 
     var items = grid.items(); 
     var itemsToSelect = []; 
     items.each(function (idx, row) { 
      var dataItem = grid.dataItem(row); 
      if (selectedOrders[dataItem[idField]]) { 
      itemsToSelect.push(row); 
      } 
     }); 

     e.sender.select(itemsToSelect); 
     } 
    }); 
    }); 
</script>