Local Binding & Persist Grid State

[Dan]

I have a Razor Pages project where I have 2 widgets on my UI; a custom widget (non telerik) and the telerik grid. Currently they are supplied their data by the model passed in on my OnGet() method. I cannot get the Grid Persistence (all the grid options) to work with local binding. Is it possible?

Whenever I attempt the setOptions() I get an error because the url path it tries to go to doesnt exist. I am not using Ajax binding for read so there is no read methods. Is it possible to stop this behavior? I would like to use the data in my model only and not have to post another request to get all of the same data.

Grid:

@(Html.Kendo().Grid<MyClass>(Model.Data)
       .Name("Grid")
       .Columns(columns =>
       {
          //column list
       })
       .Sortable()
       .Groupable()
       .ToolBar(toolBar =>
       {
           toolBar.Save();
           toolBar.Search();
       })
       .Editable(editable => editable.Mode(GridEditMode.InCell))
       .Scrollable()
       .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
       .Reorderable(r => r.Columns(true))
       .Resizable(r => r.Columns(true))
       .ColumnMenu()
       .Pageable(pageable => pageable
       .Refresh(true))
       .DataSource(dataSource => dataSource
           .Ajax()
           .ServerOperation(false)
           .Model(model =>
           {
               //mode fields

           })
           .Update(u => u.Url("/Index/?handler=Update").Data("forgeryToken"))
           )

        )

 

And here is how I try to get and set my grid options:

 

$("#gridStateSave").click(function (e) {
       var grid = $("#Grid").data("kendoGrid");
       e.preventDefault();
       localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
   });

   $("#gridLoadState").click(function (e) {
       e.preventDefault();
       var options = localStorage["kendo-grid-options"];
       if (options) {
           grid.setOptions(JSON.parse(options));
       }
   });

 

With the code like this, all of the options are applied to my grid, however the data disappears which i assume to be because the setOptions() calls a read method and since there is no read method configured on my grid, errors and returns no data.I would like to prevent having to call a duplicate request to get the same data that is already in my grids datasource.

Any help is appreciated.

[Georgi Denchev]

Hi Dan,

Thank you for the provided snippets. 

In such scenarios it is better to use a custom DataSource instead of Ajax binding. You can turn off the different server operations using a custom datasource as well, the only downside is you need to turn them off one by one.

.DataSource(ds => ds.Custom()
    .ServerAggregates(false)
    .ServerFiltering(false)
    .ServerGrouping(false)
    .ServerPaging(false)
    .ServerSorting(false)

The updating/deleting/editing will all happen on the provided DataSource, so handlers for those actions are not needed.

Let me know if you require further assistance.

Best Regards,
Georgi Denchev
Progress Telerik