Telerik grid with state

One of the pain points (for me at least) with the otherwise fab Telerik grid, is that if you are showing a master list of items, each of which is linkable to a details page, then when you come back to the master list, your sorting and filtering has gone, and you're back where you started.

In order to reduce this pain, I created the TelerikGridWithSettings component, which is an almost drop-in replacement for the standard TelerikGrid, but preserves the grid state in local storage.

Basic usage is very simple, all you need to do is supply a value for the StorageKey parameter, and use the grid as normal. Whenever state is changed, or the component loads, local storage is used to preserve the previous state.

The sample below uses a simple array of Person objects (pulled from https://randomuser.me/api) as the data source. Try setting some filters and/or sort, leaving this page and coming back. You should find that your settings are restored. If you use virtualisation, then the current skip and take will also be restored.

In the unlikely event that you need to handle OnStateInit or OnStateChanged events, you can do so by using the OnStateInitPre, OnStateInitPost, OnStateChangedPre, and OnStateChangedPost event handlers. These allow you to run your own code before or after the component's state handling.