保留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); 
} 

在