0

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.

user3420328
  • 53
  • 1
  • 9
  • 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 Jun 22 '15 at 18:35
  • @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 Jun 22 '15 at 18:55
  • 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 Jun 22 '15 at 19:09
  • 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 Jun 22 '15 at 19:35
  • 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 Jun 22 '15 at 20:36

1 Answers1

0

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
    );
}
user3420328
  • 53
  • 1
  • 9