jquery - jqGrid Reload Filter Values After .trigger("reloadGrid")

Question

I have a jqGrid where I have local filter/sort capability enabled. I am reloading the grid (from the server) when a custom refresh button is clicked which calls .trigger("reloadGrid") after I set the datatype to JSON. The reload is successful, however when there is a value in one of the filter fields at the top of the column it is losing that value.

I am trying to save the postData.filters before setting the value to JSON, then after the reload I'm trying to set the new filters to the saved value, set the data to local, then reload the grid.

Here is what I have so far:

var previouslySavedFilter;
var p;    

$.subscribe('loadComplete', function(event, data) {
    //Set Grid Attributes
    $("#gridtable").jqGrid('setGridParam', {
        ignoreCase : true
    });

    //Bind events to refresh grid
    $("#gridtable").bind("jqGridAddEditAfterSubmit", function () {
        $(this).jqGrid("setGridParam", {datatype: 'json'});
            return [true];
    });

    $("#refresh_gridtable").bind("click", function(){
        $("#gridtable").jqGrid("setGridParam", {datatype: 'json'});
        return [true];
    });

    //Set Up to Apply Local Filters
    var p = $('#gridtable').jqGrid("getGridParam", "postData");
    var dtype = $('#gridtable').jqGrid("getGridParam", "datatype");

    if (dtype === "json") {
        setTimeout(function () {
            console.log("Value of p on loadComplete: " + JSON.stringify(p.filters));
            console.log("Value of previouslySavedData on loadComplete: " + JSON.stringify(previouslySavedFilter));

            p.filters = previouslySavedFilter; 
            p.search = true;
            $("gridtable").trigger("reloadGrid");
            alert("Hey");
        }, 
        50);
    };
}

function refreshGrid(){
    var p = $('#gridtable').jqGrid("getGridParam", "postData");
    console.log("Value of P in reFreshGrid: " + JSON.stringify(p)); 
    previouslySavedFilter = p.postData.filters;

    $("#gridtable").jqGrid("setGridParam", {datatype: 'json'});
    $("#gridtable").trigger("reloadGrid");
}


<sjg:grid
    id="gridtable"
    navigatorExtraButtons="{
    refresh:{ 
        title:'Refresh', 
        icon:'ui-icon-refresh',
        onclick:refreshGrid
    }
    ...
>

I do not know how to save the filters BEFORE I set the datatype to JSON and reload the grid. The above code displays "p is undefined" in the console. If I print the postData AFTER the reload (in loadComplete) then I can view the filter data.

Answer 1

Below is the code that will force the grid to reload using the sort/filter information. This code goes at the end of loadComplete(). Setting the datatype to local then triggering the reload is the key to getting the grid to apply the sort/filter to the grid (reloading when data is set to 'json' which will reload the grid from the server.)

var dtype = $('#gridtable').jqGrid("getGridParam", "datatype");

if (dtype == 'json'){
    $("#gridtable").jqGrid("setGridParam", {datatype: 'local'});    
    setTimeout(function () {
        p.search = true;
        $("#gridtable").trigger("reloadGrid");
        },0
    );
}