Into the cloud

In a recent ASP.NET MVC project we used jqGrid. An excellent jquery plugin to display a grid. We added some filter possibilities and with jquery updated the url where we had to fetch the data from.

Worked nice, however, when the user selected a certain filtering or a certain page and clicked on one of the items in the list, they were navigated away from the grid. When they navigated back, the grid was at its start position, so at the first page, default sorting and filtering.

So we had to store the values selected by the user. I created two javascript functions for this (in combination with jQuery)

function saveGridToCookie(name, grid) {
var gridInfo = new Object();
name = name + window.location.pathname;
gridInfo.url = grid.jqGrid('getGridParam', 'url');
gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
gridInfo.selrow = grid.jqGrid('getGridParam', 'selrow');
gridInfo.page = grid.jqGrid('getGridParam', 'page');
gridInfo.rowNum = grid.jqGrid('getGridParam', 'rowNum');
$.cookie(name, $.toJSON(gridInfo));
}

function loadGridFromCookie(name) {
var c = $.cookie(name + window.location.pathname);
if (c == null)
return;
var gridInfo = $.parseJSON(c);

var grid = jQuery("#" + name);
grid.jqGrid('setGridParam', { url: gridInfo.url });
grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
grid.jqGrid('setGridParam', { selrow: gridInfo.selrow });
grid.jqGrid('setGridParam', { page: gridInfo.page });
grid.jqGrid('setGridParam', { rowNum: gridInfo.rowNum });

grid.trigger("reloadGrid");
} 

It reads and stores some of the information of a grid from and to a cookie. The cookie has a lifetime of the session and is unique by page and grid.

A html extension writes the javascript and table for the grid, so we can easily change that to include calls to those functions. We added an event to the LoadComplete of the grid.

var eventList_init = false;
jQuery('#eventList_tb').jqGrid( { … other properties …,
loadComplete : function() { if (eventList_init) saveGridToCookie("eventList_tb", jQuery("#eventList_tb")); }

if (eventList_init == false){
loadGridFromCookie("eventList_tb");
eventList_init =true;}

When the page is loaded (first time or navigated back), the values are read from the cookie. When the grid is loaded (by paging, sorting, filtering) the loadComplete will be fired and stores the new settings of the grid.

Drawback; cookies has to be allowed and the user may return to a grid set to a certain page/filtering/sorting.

If you know of another solution, let me know!