free-jqgrid: easier way to save, load and apply filter data including filter-toolbar text and page-settings?
<p>I have a pretty standard <code>jqGrid</code> using <code>free-jqGrid 4.13</code> with <code>loadonce: true;</code>  </p>

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

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

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

<h1>1) saving jqGrid filter-data (locally):</h1>

<pre><code>// 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 &lt; 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 &amp;&amp; $("#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 ));
});
</code></pre>

<p><br></p>

<h1>2) loading and applying jqGrid filter-data:</h1>

<p><em>for use in a document-ready closure, for example</em></p>

<pre><code>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 &lt; max; i++)
{
    $("#gs_" + localsave.toolbar[i].name).val( localsave.toolbar[i].value );
}
</code></pre>

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

<h3>my question(s):</h3>

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

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

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

<p>?</p>

<p>thank you for any help and/or suggestions!</p>