Kendo MVC Grid - Preserve State issue

[Ashok]

 

We are trying to implement kendo grid preserve state functionality. Requirement is a grid state (filter, page etc) is already pre saved in the db and every times page loads, we have to show grid with the pre saved state. We followed the example given in link ( http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side ) and able to achieve the requirement in two steps.
 Step 1: Load the page with default grid option

@(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
      .Name("grid")
      .DataSource(ds => ds.Ajax().Read("Read", "Home"))
      .Pageable()
      .Groupable()
      .Sortable()
      .Reorderable(r => r.Columns(true))
      .Resizable(r => r.Columns(true))
)

and then,
Step 2: on document ready, make an ajax call , get the pre saved grid options , destroy the existing grid and set the grid options

$(document).ready(function ()
{
    var grid = $("#grid").data("kendoGrid");

    var dataSource = grid.dataSource;

    $.ajax({
        url: "/Home/Load",
        success: function(state) {
            state = JSON.parse(state);

            var options = grid.options;

            options.columns = state.columns;

            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();

            $("#grid")
               .empty()
               .kendoGrid(options);
        }
    });
});


Problems with this approach are

- grid’s data read server side method “Read” is hit twice. One for default load and other for state load.
- Grid shows all records first , then truncates and then shows the data with saved grid options. It does not look good.

Is there any way to apply the grid options first time itself, not on document ready. I want to avoid multiple server side calling and grid data reads.

[Boyan Dimitrov]

Hello Tejas,

 

There are couple of possible solutions/ideas for your scenario: 

 

   1. Is there a particular reason why the Kendo UI Grid is not initialized after the state options are retrieved from the server? Why the Kendo UI Grid for ASP.NET MVC is declared with some default options at first place and then destroyed in order to load the state options. The Kendo UI Grid could be initialized on the client-side in the document ready after the response with the state options is retrieved. 

 

   2. In order to avoid the initial request to the read method you can set the AutoBind(false) for the Kendo UI Grid for ASP.NET MVC. Please check the autoBind option. 

 

  3. Also an option would be to use a Model object for setting the columns configuration options and etc just like shown in the Binding to DataTable code library. A model object is used to add columns and some other configuration options. 

 

Regards,
Boyan Dimitrov
Telerik