Сохранение состояния сетки Kendo

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

Моя цель состоит в том, чтобы убедиться, что все и фильтраций сортировки сохраняются при перезагрузке страницы. Для этого я получаю состояние сетки в виде объекта 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. Но это так и есть.

Любые предложения были бы весьма полезными.

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