How can I preserve the search filters in jqGrid on page reload?
Asked Answered
L

2

6

I found many discussions that were close to what I need, and this question is the closest - How can I set postData._search to true in the request in jqGrid?.

As I'm struggling with almost the same problem, and just can't get it working - I want to setup "search" and "filters" during the initial loading of the jqGrid - say, on the page reload, and I have my filters stored in the session - and I tried everything I found in Oleg's examples - it just doesn't work!

That's what I'm trying to do -

loadBeforeSend: function (xhr) {
    var grid = jQuery('#' + block_id);
    var postData = grid.jqGrid('getGridParam','postData');
    jQuery.extend(postData,{filters:MyFilters});
    grid.jqGrid('setGridParam', {search: true, postData: postData});
    console.log(grid.jqGrid('getGridParam','postData'));
}

The console printout shows that the filters are in place, but the _search is still false, and the actual Post gets sent even with no filters:

_search   false
block_id  report_block_1table
nd        1297451574526
page      1
rows      25
sidx      id
sord      desc

However, if I put exactly the same code - with the addition of

grid.trigger("reloadGrid");

line - into some button's onClickButton function, and later click the button - everything works; but I need to make it work on "page reload"!

Any ideas? It's driving me crazy...

Longobard answered 11/2, 2011 at 19:51 Comment(0)
T
8

It seems to me that you are not the first person who ask the same question. Recently I asked on the close question (read many comments to the answer). Another old answer including the demo could probably answer on some your opened questions.

Your code using beforeRequest don't work just because the function beforeRequest will be caled immediately before the ajax call and the changing of the search parameter is too late. Moreover overwiting of filters everytime is probably not the best idea. In the case the user will not able to set any other grid filter.

So I can repeat, that the imlementation of the solution which you need is very simple. You should just set filters property of the postData parameter of jqGrid to the filter which you need and set another jqGrid parameter search:true additionally. It's all! Later the user will be able to open advance searching dialog and overwrite the filters. The user can also click on "Reset" button of the advance searching dialog and set filters to empty string and search:false.

For better understanding I have to clear how search parameter or some other jqGrid will be used in the URL. There are parameter prmNames of jqGrid which defines the names of parameters send as a part of URL or as a part of data POSTed to the server. The default value of prmNames contain search:"_search" and the code of internal populate function used by jqGrid has the following simplified code fragment:

var prm = {}, pN=ts.p.prmNames;
if(pN.search !== null) {prm[pN.search] = ts.p.search;}
if(pN.nd !== null) {prm[pN.nd] = new Date().getTime();}
if(pN.rows !== null) {prm[pN.rows]= ts.p.rowNum;}
if(pN.page !== null) {prm[pN.page]= ts.p.page;}
if(pN.sort !== null) {prm[pN.sort]= ts.p.sortname;}
if(pN.order !== null) {prm[pN.order]= ts.p.sortorder;}
...
$.extend(ts.p.postData,prm);

where

prmNames: {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search",
           nd:"nd", id:"id",oper:"oper",editoper:"edit",addoper:"add",
           deloper:"del", subgridid:"id", npage: null, totalrows:"totalrows"}

So to set _search parameter of URL one should set search parameter of jqGrid.

Look at the following demo. You can easy to verify using Fiddler of Firebug that the jqGrid from the page send HTTP GET with the following url:

http://www.ok-soft-gmbh.com/jqGrid/MultisearchFilterAtStart1.json?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22gt%22%2C%22data%22%3A%222007-09-06%22%7D%2C%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22lt%22%2C%22data%22%3A%222007-10-04%22%7D%2C%7B%22field%22%3A%22name%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%22test%22%7D%5D%7D&_search=true&nd=1297508504770&rows=10&page=1&sidx=id&sord=asc

So it do exactly what you need. The code of the demo contain the following code fragment:

$("#list").jqGrid({
    url: 'MultisearchFilterAtStart1.json',
    datatype: "json",
    postData: {
        filters:'{"groupOp":"AND","rules":['+
                '{"field":"invdate","op":"gt","data":"2007-09-06"}'+
                ',{"field":"invdate","op":"lt","data":"2007-10-04"}'+
                ',{"field":"name","op":"bw","data":"test"}]}'
    },
    search:true,
    // ...
});
Thule answered 12/2, 2011 at 11:55 Comment(2)
Great!! the very last snipped of code totally solved the misery - this - ` jQuery('#' + block_id).jqGrid({ url:loadUrl, mtype:'POST', postData:{block_id:block_id, filters:'{"groupOp":"AND","rules":[{"field":"Cloud Upload ", "op":"cn","data":"costa"}]}'}, search:true, autowidth:true, height: '100%', datatype: "json", // .. });`Longobard
[ran out of time on editing the previous comment] - when i put my search/filter params into the grid-init arguments, it totally made it all work. Thank you, I really appreciate your help!Longobard
Y
0

@Oleg Oleg's answer works like a charm but just for the first time.

For me when I reload the grid, filters and search flag are not set up. With the following code each time I reload the grid it also sends the filters and search flag. I use server side sort and pagination.

I'm using:

jQuery("#myGrid").navGrid("#myPager", {search: true, refresh: true, edit: false, 
    add:false, del:false}, {}, {}, {}, {});

On the grid definition:

beforeRequest: function() {
    // filter to be added on each request
    var filterObj1 = {"field":"myField","op":"eq","data":"myValue"}; 
    var grid = jQuery("#myGrid");
    var postdata = grid.jqGrid('getGridParam', 'postData');             
    if(postdata != undefined && postdata.filters != undefined ) {
        postdata.filters = jQuery.jgrid.parse(postdata.filters);
        //Remove if current field exists
        postdata.filters.rules = jQuery.grep(postdata.filters.rules, function(value) {
            if(value.field != 'myField')
                return value;
        });
        // Add new filters
        postdata.filters.rules.push(filterObj1);
    } else {
        jQuery.extend(postdata, {
            filters:  { 
                "groupOp":"AND",
                "rules":[filterObj1] 
            }
        });
        // more filters in the way: postdata.filters.rules.push(filterObj1);
    }
    postdata.filters = JSON.stringify(postdata.filters);
    postdata._search = true;
    return [true,''];
}
Yellowlegs answered 3/3, 2014 at 16:50 Comment(1)
AS Oleg pointed out if you override prNames with your custom values you must modify code above accordingly.Yellowlegs

© 2022 - 2024 — McMap. All rights reserved.