free-jqgrid: easier way to save, load and apply fi

Question

I have a pretty standard jqGrid using free-jqGrid 4.13 with loadonce: true;

What I want to do is something I came across a couple of times:
I want to save the state of the grid (without the data);
that means the settings (number of current page for example), filters the user applied and also the text in the filter-toolbar.
and then load and apply this data to the grid later.

jqGrid is such a powerful tool, but stuff like this seems such a pain to accomplish.

after hours and hours of work i came up with a complicated solution; it is working, but it's not a nice solution imho:

1) saving jqGrid filter-data (locally):

// in this example i am using the "window unload" event,
// because i want the filters to be saved once you leave the page:

$(window).on("unload", function(){

    // i have to access the colModel in order to get the names of my columns
    // which i need to get the values of the filter-toolbar textboxes later:
    var col_arr = $("#list").jqGrid("getGridParam", "colModel");

    // my own array to save the toolbar data:
    var toolbar_search_array = [];
    for(var i = 0, max = col_arr.length; i < max; i++)
    {
        // only saving the data when colModel's "search" is set to true
        // and value of the filterToolbar textbox  got a length
        // the ID of the filterToolbar text-input is "gs_" + colModel.name
        if(col_arr[i].search && $("#gs_" + col_arr[i].name).val().length)
        {
             toolbar_search_array.push({ name: col_arr[i].name, value: $("#gs_" + col_arr[i].name).val() });
        }
    }

    // putting everything into one object
    var pref = {
        // 1. toolbar filter data - used to fill out the text-inputs accordingly
        toolbar :   toolbar_search_array,

        // 2. postData - contains data for the actual filtering 
        post :      $("#list").jqGrid("getGridParam", "postData"),

        // 3. settings - this data is also included in postData - but doesn't get applied 
        // when using 'setGridParam'
        sortname:   $('#list').jqGrid('getGridParam', 'sortname'),
        sortorder:  $('#list').jqGrid('getGridParam', 'sortorder'),
        page:       $('#list').jqGrid('getGridParam', 'page'),
        rowNum:     $('#list').jqGrid('getGridParam', 'rowNum')

    };

    //saving in localStorage
    localStorage.setItem("list",  JSON.stringify( pref ));
});

2) loading and applying jqGrid filter-data:

for use in a document-ready closure, for example

var localsave = JSON.parse(localStorage.getItem("list"));

// these settings are also saved in postData, 
// but they don't get applied to the grid when setting the postData:
$('#list').jqGrid('setGridParam', {
    sortname: localsave.sortname,
    sortorder: localsave.sortorder,
    page: localsave.page,
    rowNum: localsave.rowNum
});

// this applies the filtering itself and reloads the grid. 
// it's important that you don't forget the "search : true" part:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : localsave.post
}).trigger("reloadGrid");

// this is loading the text into the filterToolbar 
// from the array of objects i created:
console.log(localsave.toolbar);
for(i = 0, max = localsave.toolbar.length; i < max; i++)
{
    $("#gs_" + localsave.toolbar[i].name).val( localsave.toolbar[i].value );
}

it seems strange to me that postData contains all the data necessary but it's impossible to apply this data; at least as far as i know.

my question(s):

is it really this inconvenient to apply all the filter- and paging-data or am i missing something?
why can't this be as simple as:

// saving:
var my_save = $("#list").jqGrid("getGridParam", "postData");

// loading:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : my_save
}).trigger("reloadGrid");

?

thank you for any help and/or suggestions!

Answer 1

The answer with the demo provides an example of the implementation. The method refreshSerchingToolbar is relatively long. On the other side the code is still not full. It's not restore the state of operands, if the option searchOperators: true is used. I wanted to rewrite many parts of the filterToolbar method to make easier the saving/restoring of the the state of the filter toolbar or refreshing based on the changed postData. It's just the problem of the time and nothing more. What you describe is close to the feature forceClientSorting: true, which was difficult to implement in original code of jqGrid 4.7, but it was easy to implement after I rewrote large part of processing of the server response. The same problem is with the code of filterToolbar. The changes of filterToolbar is still in my TODO list and I'll made the corresponding changes soon.