Local Binding & Persist Grid State

2 posts, 0 answers
  1. Dan
    Dan avatar
    24 posts
    Member since:
    Jun 2020

    Posted 13 Oct 2020 Link to this post

    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.

  2. Georgi Denchev
    Admin
    Georgi Denchev avatar
    85 posts

    Posted 16 Oct 2020 Link to this post

    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/.

Back to Top