State Management In Kendo UI Grid

Introduction to Kendo Grid:

Grid came into existence to fulfill the need of data presentation in applications. Since it’s creation it has been an undisputed choice for data presentation. Kendo Grid is a third party tool which goes extramile and provides much more than mere data presentaion. It caters a large set of end user needs i.e Sorting, Paging, Filtering, Reordering, Resizing and many more as it’s inbuilt components.

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 visit again 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 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.

How to do it?

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 back them 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:

var grid= $('#yourGridID').data("kendoGrid");
 var dataSource = grid.dataSource;

Step Two : Retrieving the current state of Filtering, Paging ( PageSize and Current Page), Sorting, Grouping.

 var gridState = {
 page: dataSource.page(),
 pageSize: dataSource.pageSize(),
 sort: dataSource.sort(),
 group: dataSource.group(),
 filter: dataSource.filter()
 };

Step Three : Retrieving the order of columns (It Take account of Re ordering of column’s).

 var columnsListOfView = grid.columns;

Step Four : Retrieving the list of hidden columns if any.

 var currentColumnState = [];

//Storing the Hidden columns 
 for (var i = 0; i < grid.columns.length; i++) {
 if (grid.columns[i].hidden) {
 currentColumnState.push(grid.columns[i].field);
 }
 };

Step Five : Forming a GridSetting string and Saving it to the Database.

 var kendoGridSettings = kendo.stringify(gridState) + '%' + kendo.stringify(columnsListOfView) + '%' + kendo.stringify(currentColumnState) + '%' + columnWidths;

 

Inside the beforeunload event of windows we can save the grid state to the DataBase through a Ajax call.

 $(window).bind('beforeunload', function () {
 //Method for saving the grid state kendoGridSettings to the DataBase
 }

 
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

if (defaultKendogridSettings != '' && defaultKendogridSettings != '%%%') {
 savedState = JSON.parse(defaultKendogridSettings.split('%')[0]);
 savedColumnsList = JSON.parse(defaultKendogridSettings.split('%')[1]);
 savedCurrentColumnState = JSON.parse(defaultKendogridSettings.split('%')[2]);
 savedColumnWidths = defaultKendogridSettings.split('%')[3];
 }


var grid = $('#YourGridID').data("kendoGrid");

Step Two : Restoring the grid state (paging, grouping , sorting and filtering)

 if (savedState != '' && savedState != null) {
 grid.dataSource.query(savedState);
 }

Step Three : Restoring Visibility of grid columns.

 if (savedCurrentColumnState != '' && savedCurrentColumnState != null)
 {
   if (savedCurrentColumnState && savedCurrentColumnState.length > 0) 
  {
     for (var i = 0; i < savedCurrentColumnState.length; i++) 
    {
       grid.hideColumn(savedCurrentColumnState[i]);
    }
  }
 }

Step Four : Restoring column’s order.

if (savedColumnsList != '' && savedColumnsList != null)
{
for (i = 0; i < savedColumnsList.length; i++)
{
if (grid.columns[i] != null && savedColumnsList[i] != null)
{
if (grid.columns[i].field != savedColumnsList[i].field)
{
for (j = 0; j < grid.columns.length; j++)
{
if (grid.columns[j].field == savedColumnsList[i].field)
{
grid.reorderColumn(i, grid.columns[j]);
}
}
}
}
}
}

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 🙂

Written By: Nitin Rawat, Software Developer, Mindfire Solutions