This is a migrated thread and some comments may be shown as answers.

Local Binding & Persist Grid State

1 Answer 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Veteran
Dan asked on 13 Oct 2020, 01:46 PM

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.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 16 Oct 2020, 02:05 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Dan
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or