jqGrid Trying to apply filter(s) on Grid creation

Question

I have an object that contains the following filter string:

prefs.filters={"groupOp":"AND","rules":[{"field":"FirstName","op":"cn","data":"max"}]}

Here is my grid create, where I am trying to apply the filters in the postData setting:

        // Set up the jquery grid
        $("#jqGridTable").jqGrid(
            {
                // Ajax related configurations
                url: jqDataUrl,
                datatype: "json",
                mtype: "GET",
                autowidth: true,

                // Configure the columns
                colModel: columnModels,

                // Grid total width and height
                height: "100%",

                // customize jqgrid post init
                gridComplete: function()
                {
                    CRef.updateJqGridPagerIcons("jqGridTable");
                },

                // Paging
                toppager: true,
                rowNum: 20,
                rowList: [5, 10, 20, 50, 100],
                viewrecords: true, // Specify if "total number of records" is displayed

                // Default sorting
                sortname: typeof prefs.sortCol !== "undefined" ? prefs.sortCol : "LastName",
                sortorder: typeof prefs.sortCol !== "undefined" ? prefs.sortOrd :  "asc",
                sorttype: "text",
                sortable: true,

                postData: typeof prefs.filters !== "undefined" ? { filters: prefs.filters } : {},
                //also tried this...
                //postData: typeof prefs.filters !== "undefined" ? { JSON.stringify(filters: prefs.filters) } : {},

 //remaining property settings excluded from post to keep short.

Update: Using .navGrid on grid as follows:

.navGrid("#jqGridTable",
                { refresh: true, add: false, edit: false, del: false, refreshtitle: getRefreshText('@Model.Instruction'), searchtitle: searchText },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                { closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup: true });

When grid is created, the filter in postData is not applied. I also tried triggering reload event after the initial create and that to did not apply filter either.

From other posts, I believe I'm on correct path, but appear to be missing something.

Update after comments:

I added the following code to loadComplete...

if ($("#jqGridTable").jqGrid("getGridParam", "datatype") === "json") {
    setTimeout(function () {

        $("#jqGridTable").jqGrid("setGridParam", {
            datatype: "local",
            postData: { filters: prefs.filters, sord: prefs.sortOrd, sidx: prefs.sortCol },
            search: true
        });

        $("#jqGridTable").trigger("reloadGrid");
    }, 50);
}

and it successfully retains the filters. :)

However, now I have interesting issue side effect. I can sort on columns and some columns will change to sort asc/desc correctly, but when I go to others and sort, they sort but in the order that they originally loaded which is neither asc or desc.

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

You have to set search: true option of jqGrid if you want that filters will be applied. Moreover you use datatype: "json". It means that the filters will be just send to the server and your server code have to decode the filters and to use there. One more remark. The correct value for postData would be { filters: JSON.stringify(prefs.filters) }.

UPDATED: I recommend you upgrade to the latest version (4.12.1) or free jqGrid. It's the fork of jGrid which I develop since the end of 2014. To use free jqGrid you can just change the URLs to jqGrid files to URLs described in the wiki article. After that you can use the following options:

loadonce: true,
forceClientSorting: true,
search: true,
postData: { filters: prefs.filters },
sortname: prefs.sortCol,
sortorder: prefs.sortOrd

and remove the loadComplete code which you posted in "Update after comments" part of your question. Free jqGrid will load all data returned from the server, apply the filter prefs.filters locally, sort the results locally and display the first page of the results (based on the page size rowNum: 20).

The old demo loads the JSON data from the server, sort the data locally and filter by isFinal === 1 and finally display the first page of results. The demo uses additionally custom sorting using sortfunc, additionalProperties, which allows to saved additionally properties in local data.

You can additionally include reloadGridOptions: { fromServer: true } to other options of navGrid which you use (refresh: true, add: false, ...). It will change the behavior of the Refresh button of the navigator bar to reload the data from the server if the user clicks on the button. See another answer, which I posted today for more information about new options of free jqGrid and loadonce: true.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 08 '16 at 16:03

Oleg

220,925
34
403
798

I applied your suggestions and now grid does not load. I removed search: true and it loads without filter. I am using a .navGrid so not sure if that conflicts with search: true. You mentioned the datatype: json and decoding on server. One question would be, when press search on the search pop up from pager bar, am I just filtering the existing grid data or am I requerying the data with filter and reloading grid? – MaxAx Feb 08 '16 at 16:55
@MaxAx: If you use `datatype: "json"` then **all logic have to be implemented in your server code**: sorting, paging and filtering. If you ask this that I can suppose that you don't implemented it. If you have not so many items of data (definitively if the total number of rows is less as 1000) then the usage of `loadonce: true` is the recommenced way. The server should just return all data at once. No additional code need be written on the server. The client code implement sorting, paging and filtering for you. – Oleg Feb 08 '16 at 17:02
I am a little confused. Maybe I am not understanding something. My observation and question: If I can set sortname and sortorder in grid create as in my post above(updated) and that applies fine when grid loads, why would my filters in postData not apply when grid created? – MaxAx Feb 08 '16 at 18:05
I applied changes(see update in post) based upon what you said(and other posts) and filter works as expected. Now my column sorting is acting weird(see update above). – MaxAx Feb 08 '16 at 19:30
@MaxAx: Which version of jqGrid you use? I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork since the end 2014. I implemented many features. For example one can use `forceClientSorting: true` option in combination with `loadonce: true`. Thus you can just set `search: true, postData: { filters: prefs.filters }, sortname: prefs.sortCol, prefs.sortOrd` and **remove any code from `loadComplete`**. Free jqGrid will load the data from the server and apply sorting and filtering **locally before displaying the first page**. It's exactly what you need. – Oleg Feb 08 '16 at 20:57
@MaxAx: You can examine [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/filterByAdditionalPropertiesAndSearchingDialog1.htm), which loads [the JSON data](http://www.ok-soft-gmbh.com/jqGrid/OK/sortfunc.json), sort the data **locally** and filter by `isFinal === 1` and finally display the first page of results. The demo uses additionally *custom sorting* using `sortfunc`, `additionalProperties` which allows to saved additionally properties in local `data`. – Oleg Feb 08 '16 at 20:59
@MaxAx: See **UPDATED** part of my answer for more details. – Oleg Feb 08 '16 at 21:25

jqGrid Trying to apply filter(s) on Grid creation

1 Answers1