State Management In Kendo UI Grid

Kendo Grid provides a vast set of  inbuilt settings which makes kendo preferable over other competitors grids present in the market.

Some of these settings are Grouping , Sorting , Filtering , Reordering , Paging , Re sizing and many more .
Sometimes we need to see the grid in the exact state as it was when we left it last time so that we don’t have to make our preferable settings again in the grid when we re-visit the page .
There are two possible solutions for this problem :
1> Either store the complete state into the browser cache.
2> Save the state in the database and retrieve and apply it back to the grid when we come again to the page.
I will be showing you the second way of doing the desired.

Solution :

When you are leaving the page find the grid state and and save it to the DataBase and while coming back Retrieve the settings and apply them back to the grid.

While Leaving the page :
Below explained steps will lead to the saving of grid state to the DataBase.
Step One : Get the Grid’s Datasource:
Step Two :Retrieving the current state of Filtering, Paging ( PageSize and Current Page), Sorting, Grouping.
Step Three : Retrieving the order of columns (It Take account of Re ordering of column’s).
Step Four : Retrieving the list of hidden columns if any.
Step Five : Forming a GridSetting string and Saving it to the Database.
Inside the beforeunload event of windows we can save the grid state to the DataBase through a Ajax call.
While coming back to the page :
Following steps will help to achieve the desired.
Step One : Retrieve the Saved KendoSettings
In the page just before creating the grid we have to Retrieve these settings from the Database and have to apply them back on the kendo grid.
Get the data stored in a global variable i.e defaultKendogridSettings
Step Two : Restoring the grid state (paging, grouping , sorting and filtering)
Step Three : Restoring Visibility of grid columns.
Step Four : Restoring column’s order.
So this is how one can store the Kendo grid settings in the database and apply it back again.

One important feature of web designing is the depth of configurability in it. A highly configurable design caters large aspect of flexibility but at the same time it brings complexity for the end users too and in such situations state management is helpful in breaking the ice.
Hope this one more way of state management helps 🙂



13 thoughts on “State Management In Kendo UI Grid

  1. really nice article as it has helped me greatly as all other examples have issues with the paging. One thing i am seeing though i have one field that i have set hidden: true. if i select this via the grid and set it to visible, next time i reload the column it is always hidden. any ideas on how to overcome this?

  2. Thanks Jonathon , am glad that the article helped you.

    Steps to resolve the hiding issue.
    1. Make sure that the currentColumnState is updated on manual unhiding of the columns from the grid. If yes then it should not be hidden on next reload.
    2. If the column state is not getting updated on user action then find the close event of the column menu and update the currentColumnState inside it.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s