Reset grid to initial state

[Bob]

Hi, I am using the grid's persist state feature to retain a user's current page, sorts, filter, etc.  I've been asked to add a "Reset Grid State" button to the grid to basically set the grid back to how it looked on initial load prior to any paging, sorting, filtering, etc.  What's the best way to do this?

[Kiril Nikolov]

Hello Bob,

The best way to do this is to use the dataBound event, where when the grid is loaded for the first time you can get its options and store them into a variable, for any subsequent dataBound events, you do not update the value of that variable, so the initial settings are saved. Then you can use that variable to restore the initial state of the grid.

Regards,
Kiril Nikolov
Telerik

 

 

[Bob]

Kiril, that's what I ended up doing.  We added a "Reset Grid State" button in the grid's toolbar which will reset sort and filters, then we use the grid's setOptions method to revert back to default state which we are saving in localstorage.

[Kiril Nikolov]

Hello Bob,

It looks like a pretty viable solution! In case something else comes up, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik

 

 

[Dan]

Hi,

I have a similar request but the settings have to be stored in the database and they have to be loaded automatically from the database when the user access the grid.

One way that I implemented this (the reset button was not required) was to load the settings on the server before providing the page to the user.

If I were to not implement the server side of the loading of settings and do this on client side would there be drawbacks because the grid was initialized twice?

Is there an alternative on how to implement this?

[Alex Hajigeorgieva]

Hi, Dan,

I believe that the approach that you have taken is the one discussed in this forum thread:

https://www.telerik.com/forums/remember-kendo-grid-state-(current-page-current-sort-filter-selected-record-etc)-while-loading-back-grid

If this is the case and you are only concerned about the data source query (data source state), then you could:

1) Client-side approach

- add the AutoBind(false) setting to the grid
- make the ajax request to get the sort, filter, group. page, pageSize from the server
- in the success handler, get the grid data source and use the query() method to make a read request with the saved parameters

2) Server-side approach

It is possible to serialize the data source request with Json.Convert but the issue will come when you attempt to deserialize it. An error will be thrown because the JSON serializer will attempt to instantiate an interface(IFilterDescriptor). Unfortunately, deserialization is not provided out of the box, although there is a UserVoice request that you may upvote if you wish(the popular requests get pulled forward for implementation by the team):

https://feedback.telerik.com/aspnet-mvc/1357562-serialization-support-of-datasourcerequest-and-applying-outside-of-asp-net-mvc

There is a forum thread which shows how to record the filters in the database and use the FilterDescriptor factory to recreate them.

https://www.telerik.com/forums/passing-current-datasourcerequest-to-a-custom-command#d9yZdtrqCUeKUY7uvMZMeA

Let me know what you think and in case you have any further questions for either of these approaches.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Dan]

Hi Alex,

I just saw that my requirement has a different definition of current state. My requirement grid state refers to column visibility, column ordered and column sorting. 

This was the reason I asked about the drawback of initializing the grid twice (because the default layout might not be the user layout)

[Alex Hajigeorgieva]

Hello, Dan,

If you chose to apply any saved options on the client, then the setOptions() method should be used:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

Internally, the setOptions() method deep extends the current options with the new ones, it calls the destroy() method of the grid (and the widget)  which removes handlers followed by one or two calls to the jQuery empty() method. So all in all - not a great drawback.

Something that needs to be handled programmatically when using the setOptions() method are the function references. This would be necessary for all custom functions - like the filter cell template for example. We have a similar how-to article demonstrating that:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-customized-filter

Finally, if you do not wish to initialize the grid twice and want to keep the options setting logic client side, you may use jQuery initialization instead and create the grid in the custom ajax success handler. 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik