保留Kendo Grid狀態

Question

我有一個服務器操作標誌設置爲false的網格。我可以排序和網格上的列篩選（只現在我有一個）：

@(Html.Kendo().Grid<Models.ItemModel>() 
      .Name("Grid") 
      .DataSource(dataSource => dataSource 
       .Ajax() 
       .ServerOperation(false) 
       .Model(model => 
       { 
        model.Id(r => r.Id); 
        model.Field(r => r.Name) 
         .Editable(false).DefaultValue(""); 
       }) 
       .Read(read => read 
        .Action("Grid_Read", "Home") 
        .Type(HttpVerbs.Get))) 
      .Columns(columns => 
      { 
       columns.Bound(r => r.Id).Hidden(); 
       columns.Bound(r => r.Name); 
      }) 
      .Sortable() 
      .Filterable() 
      .Scrollable(scrollable => scrollable.Virtual(true)) 
      .Resizable(resizable => resizable.Columns(true)) 
      .AutoBind(false)) 

我的目標是確保如果重新加載頁面的所有分類法，和的濾波被保留。爲了達到這個目的，我通過存儲在瀏覽器的localStorage中的JSON對象的形式獲得一個網格狀態。爲了完成這個，我創建了兩個javascript函數。一個保存狀態：

function saveGridState(gridId) { 

     var grid = this.data("kendoGrid"), 
      dataSource = grid.dataSource, 
      state = { 
       columns: grid.columns, 
       page: dataSource.page(), 
       pageSize: dataSource.pageSize(), 
       sort: dataSource.sort(), 
       filter: dataSource.filter(), 
       group: dataSource.group() 
      }, 

      json = JSON.stringify(state); 

     localStorage[gridId] = json; 
} 

，第二個檢索它並應用到網格：

function loadGridState(gridId) { 

     var json = localStorage[gridId]; 

     if (!json) { return; } 

     var grid = $('#'+gridId).data('kendoGrid'), 
      gridState = JSON.parse(json); 

     grid.dataSource.sort(gridState.sort); 
     grid.dataSource.filter(gridState.filter); 
     grid.dataSource.group(gridState.group); 
     grid.dataSource.page(gridState.page); 
     grid.dataSource.pageSize(gridState.pageSize); 
} 

在剃刀視圖予加載的狀態下，將其應用到電網並結合數據綁定每當排序或過濾發生變化時保存更新的事件。

<script> 

loadGridState('grid'); 
$('#grid').data('kendoGrid').data('kendoGrid').dataSource.read(); 
$('#grid').data('kendoGrid').dataSource.bind('dataBound',function(){ 
    saveGridState('grid'); 
}); 
</script> 

該機制工作正常，除了一個小的不受歡迎的工件，我無法擺脫。也就是說，我注意到網格的Read操作總是被調用兩次。第一次加載頁面，第二次加載loadGridState。

我的想法是，由於服務器操作設置爲false，應用分頁，過濾和排序不應該執行AJAX調用。但它仍然如此。

任何建議將不勝感激。

Answer 1

劍道演示頁面（http://demos.telerik.com/kendo-ui/grid/persist-state）具有持續狀態的一個例子：

localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions()); 

同樣，加載狀態：

var options = localStorage["kendo-grid-options"]; 
if (options) { 
    grid.setOptions(JSON.parse(options)); 
} 

這應該是你所需要的。在您的自定義功能的情況下，他們將類似於：

function saveGridState(gridId) { 
    var grid = $('#' + gridId).data("kendoGrid"); 
    localStorage[gridId] = kendo.stringify(grid.getOptions()); 
} 

function loadGridState(gridId) { 
    var grid = $('#' + gridId).data("kendoGrid"); 
    var options = localStorage[gridId]; 
    if (options) { 
     grid.setOptions(JSON.parse(options)); 
    } 
} 

要做到這一點作爲初始讀取操作的一部分，您可能需要使用Data方法來指定一個JavaScript方法被稱爲可檢索存儲的設置並將其作爲DataSourceRequest對象傳遞給控制器​​方法。

你Read方法看起來就像

.Read(read => read 
    .Action("Grid_Read", "Home") 
    .Type(HttpVerbs.Get) 
    .Data("getGridState") 
)) 

的getGridState將類似於：

function getGridState() { 
    var grid = $('#' + gridId).data("kendoGrid"); 
    var options = localStorage[gridId]; 
    if (options) { 
     return { request: JSON.parse(options)) }; 
    } 

    return { request: "" }; 
} 

最後，控制器方法將類似於此：

public ActionResult Grid_Read([DataSourceRequest]DataSourceRequest request) 
{ 
    ... 
    DataSourceResult result = res.ToDataSourceResult(request); 
    return Json(result, JsonRequestBehavior.AllowGet); 
} 

在