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.

Is refreshGrid be called at all? I don't know struts2. Do you can use onclick:refreshGrid inside of navigatorExtraButtons and to define refreshGrid separably as a function? Could you include your current code of loadComplete? In any way the line var p = $('#gridtable').jqGrid("getGridParam", "postData"); is wrong. It should be var p = $('#gridtable').jqGrid("getGridParam");. I recommend you to use p.previouslySavedFilter = p.postData.filters — Oleg
@Oleg: I've added the code for loadComplete. Also, I tried p = $('#gridtable').jqGrid("getGridParam") but it returns undefined, I can use ("getGridParam","postData") and it returns {"groupOp":"AND","rules":[{"field":"taxIdNbr","op":"bw","data":"11365"}]} — user3420328
The value $('#gridtable').jqGrid("getGridParam", "postData") in refreshGrid and in loadComplete should be identical. Why you have in one case undefined. By the way the usage of bind inside of $.subscribe('loadComplete', ... is wrong. It means that you make new binding on every loadComplete. If you sort by column or go to new page then loadComplete will be executed and you will have multiple binding to the same event. It's wrong. You should move the code with bindings outside of $.subscribe. I have to go away now and continue tomorrow, — Oleg
Thank you for your time Oleg. I've got this working now, I don't need to set any of the filter information, it's already there in postData, I just need to set the data to local (inside loadComplete the datatype is still set to JSON) then reload the grid. I've tried to move some of my binds out of loadComplete but then they don't run... I will work on that. Thanks again for your help. — user3420328
You are welcome! By the way you can remove $("#gridtable").jqGrid("setGridParam", {datatype: 'local'}); because jqGrid do this directly after calling of loadComplete. You can verify this by adding alert($('#gridtable').jqGrid("getGridParam", "datatype")); inside of setTimeout. The code which you posted in the answer looks like the code which I posted originally, one can just reduce it because postData.filters will be not cleared. — Oleg

user3420328 user3420328 · Accepted Answer · 2015-06-22T19:40:01

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

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

1 Answers