Persisting jqGrid State with Cookies

jqGrid is an excellent jQuery plugin for displaying a grid. To enhance user experience, we added some filter possibilities and used jQuery to update the URL where data was fetched from.

However, when users navigated away from the grid and returned, it would reset to its start position, losing any filtering or sorting they had set. To solve this, we needed to store the user's selections. Here are two JavaScript functions that achieve this using cookies:

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");
}

The functions saveGridToCookie and loadGridFromCookie store and retrieve grid settings in a session cookie. The cookie is unique by page and grid, ensuring the user's selections are preserved across navigations.

Integrating with jqGrid

To implement these functions, we need to call them at appropriate events. Here's how to integrate them into jqGrid's loadComplete event:

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 for the first time or navigated back, the values are read from the cookie. When the grid is loaded (by paging, sorting, filtering), the loadComplete event fires and stores the new settings of the grid.