On which jQgrid event I can apply changes to jQgrid

Question

I want to load jQgrid data(i.e sorted column, sort order, page) from cookie so that jQgrid can take changes from cookie when user again reopen the page the code should take changes from cokkie are as follows:

function loadGridFromCookie(name) 
    {
        var c = $.cookie(name /*+ window.location.pathname*/);
        if (c == null)
            return;
        gridInfo = $.parseJSON(c);
        var grid = $("#" + name);
        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
        grid.jqGrid('setGridParam', { page: gridInfo.page });
        grid.trigger("reloadGrid");
    }

My entire code :

<script type="text/javascript">
    function getData(jqGridParams) 
    {
        var params = new Object();
        params.pageIndex = jqGridParams.page;
        params.pageSize = jqGridParams.rows;
        params.sortIndex = jqGridParams.sidx;
        params.sortDirection = jqGridParams.sord;
        params._search = jqGridParams._search;
        if (jqGridParams.filters === undefined)
            params.filters = null;
        else
            params.filters = jqGridParams.filters;

        // AJAX call
        $.ajax({
            url: 'WSAjax.asmx/GetDataForGrid',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(params),
            success: function (data, textStatus) 
            {
                if (textStatus == "success") 
                {
                    var grid = $("#ItemGrid")[0];
                    grid.addJSONData(data.d);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) 
            {
                alert(textStatus, errorThrown);
            }
        });
    }

    function saveGridToCookie(name, grid)     // save data into cookie
    {
        var gridInfo = new Object();
        //name += window.location.pathname;
        gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
        gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
        gridInfo.page = grid.jqGrid('getGridParam', 'page');
        //$('#Hidden').val(JSON.stringify(gridInfo));
        //alert($('#Hidden').val());
        $.cookie(name, JSON.stringify(gridInfo), {expires: 3});
    }

    function loadGridFromCookie(name)  // load data from cookie
    {
        var c = $.cookie(name /*+ window.location.pathname*/);
        if (c == null)
            return;
        var gridInfo = $.parseJSON(c);
        var grid = $("#" + name);
        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
        grid.jqGrid('setGridParam', { page: gridInfo.page });
        grid.trigger("reloadGrid");
    }

    // Jquery code
    $(document).ready(function () {
        var oItemGrid = $("#ItemGrid");
        oItemGrid.jqGrid({
            datatype: 
                function (jqGridParams) {
                getData(jqGridParams);
                },
            colNames: ['Type', 'Name', 'Desc'],
            colModel: [
                { name: 'Type', index: 'Type', width: 40 },
                { name: 'Name', index: 'Name', width: 40 },
                { name: 'Desc', index: 'Desc', width: 40, sortable: false}],
            autowidth: true,
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            viewrecords: true,
            gridview: true,
            autoencode: true,
            ignoreCase: true,
            caption: 'Remember Sorting and Filtering Functionality',
            pager: '#IGPager',
            loadComplete: function(data) 
            {
                var cookieval = $.cookie("ItemGrid");
                if (cookieval != null) 
                {
                    alert("From loadComplete: " + cookieval);
                    loadGridFromCookie("ItemGrid");
                }
            },
            gridComplete: function () {
                var prvData = $.cookie("ItemGrid");
                alert("stored Data from cookie : " + prvData);
                loadGridFromCookie("ItemGrid", gridInfo);
                saveGridToCookie("ItemGrid", $("#ItemGrid"));
                var storeval = $.cookie("ItemGrid");
                alert("From gridComplete: " + storeval);
            }
            //loadonce: true
        }).jqGrid('navGrid', '#IGPager', { edit: false, add: false, del: false }, {}, {}, {}, {}, {});
    });
</script>

Answer 1

You should be able to retrieve these options before the initial grid declaration and set these options during the grid declaration rather than trying to do it in a during a grid event.

Based on initial information in the question I would recommend refactoring loadGridFromCookie to:

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

Then use the result to initialize the grid in the document ready handler:

var oItemGrid = $("#ItemGrid");
var gridSettings = loadGridFromCookie("ItemGrid");
oItemGrid.jqGrid({
    sortname: gridInfo ? gridInfo.sortname : "Type",
    sortorder: gridInfo ? gridInfo.sortorder : "ASC",
    page: gridInfo ? gridInfo.page : 1,
    ...
});

If this is not possible jqGrid supports a beforeRequest event which should do the job but you may need to remove the reloadGrid call as this could result in the grid being loaded twice.

In addition if you want to programatically re-sort the grid it is better to use the sortGrid method as this will set the sort carets correctly on the column header and also call grid reload if the final parameter is set to true.

e.g.

grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder, page: gridInfo.page })
    .jqGrid('sortGrid', gridInfo.sortname, true);