保留Kendo网格状态

我有一个服务器操作标志设置为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);
 }

在剃须刀视图中，我加载状态，将其应用到网格并绑定dataBound事件，以便在排序或过滤发生更改时保存更新后的状态。

<script>

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

该机制工作正常，除了在我无法摆脱的行为中的一个小的不受欢迎的人为因素。 也就是说，我注意到网格的Read操作总是被调用两次。 第一次加载页面，第二次加载loadGridState。

我的想法是，由于服务器操作设置为false，应用分页，过滤和排序不应执行AJAX调用。 但它仍然如此。

任何建议将不胜感激。

---

Kendo演示页面（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);
}

链接地址: http://www.djcxy.com/p/70435.html

上一篇: Preserving Kendo Grid state

下一篇: Kendo UI Grid Inline Row not Updating for Template Columns