CODEWITHSUNDEEP
javascriptjqueryjqgrid
Silvère Faride
Silvère Faride

Reputation: 33

JQGrid : restoring toolbar values and operators from filter

I am using JQGrid (version 5.3.0) to display values from a dynamic table (that I don't know the column number and columns names in advance). I retreive the columns schema from an ajax call to the server, as well as a filter that needs to be applied to the grid, and create the JQGrid from there.

The problem I am facing is that I find no way to repopulate the filter toolbar correctly from the filter that is passed to the table.

The code is the following :

$.ajax({
    url: {url to get columns and filter},
    type: 'POST',
    postData: { productID: 98 }
    success: function (result) {
        if (result) {
            $('#grid').jqGrid({
                url: {url to get data},
                datatype: 'json',
                search: true,
                postData: { productID: 98, filters: result.filter },
                myType: 'GET',
                colModel: result.columns,
                jsonReader: {
                    root: 'Data',
                    page: 'Page',
                    total: 'Total',
                    records: 'PageSize'
                },
                pager: $('#gridpager'),
                rowNum: 25,
                gridview: false,
                afterInsertRow: function (rowid, rowdata, rowelem) {
                    var color = rowelem.Color;
                    if (color != 'white') {
                        $("tr.jqgrow#" + rowid).addClass("color-" + color);
                    }
                },
            }).filterToolbar({
                groupOp: 'AND',
                defaultSearch: "cn",
                searchOnEnter: true,
                searchOperators: true,
                stringResult: true,
            });
        }
    }
});

Here is an example of the Columns model:

[
    {
        "name":"DESCRIPTION",
        "label":"Description",
        "searchoptions":
        {
            "sopt": ["bw","cn","nc","ew","eq","ne","in"],
            "attr":{"class":"glyphicon glyphicon-filter"}
        }
    },
    {
        "name":"SKU_CODE",
        "label":"SKU Code",
        "searchoptions":
        {
            "sopt":["bw","cn","nc","ew","eq","ne","in"],
            "attr":{"class":"glyphicon glyphicon-filter"}
        }
    },
    {...}
]

And here is the filter :

"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"DESCRIPTION\",\"op\":\"bw\",\"data\":\"D\"}]}"

When executing this code, the data is loaded from my data source, the filter is applied, but the filter bar stays empty.

The JQgrid

Is there a way to populate automatically the filter toolbar with values from the filter passed in parameter? I've already tried parsing the filter rules, and filling the inputs with matching values, but I could not find a way to restore the operator.

Upvotes: 3

Views: 962

Answers (1)

Tony Tomov
Tony Tomov

Reputation: 3277

  1. Since a Guriddo jGrid version 5.3 is used it is good to know that we have rewrite our documentation. Here you can find answer of a lot of your questions. In your case you should know that there is a method which do exactly what you want. The name of the method refreshFilterToolbar. Since in the current implementation of the method the serchOperator are not take into account we have fixed the method in GitHub in order to support them.

If you use the existing method without support for searchOperators your code should like this:

$("#grid").jqGrid({
...
}).filterToolbar({
    groupOp: 'AND',
    defaultSearch: "cn",
    searchOnEnter: true,
    searchOperators: true,
    stringResult: true
}).refreshFilterToolbar({"filters": result.filter});

and if you use the version from github with support for searchOperators your code should be like this

$("#grid").jqGrid({
...
}).filterToolbar({
    groupOp: 'AND',
    defaultSearch: "cn",
    searchOnEnter: true,
    searchOperators: true,
    stringResult: true
}).refreshFilterToolbar();

Note that we do not pass the filter parameter, which is get automatically.

  1. I see you use afterInsertRow event to set some class of the row based on condition. This event should be used only if there is no other way to do this. The use of this event in relative big data sets causes a slow reading and in some cases hanging. It should be used very carfully.

In your case you can use rowattr event for this purpose. Please read more about it in the same documentation page. Do not forget to set gridview to true or with other words

...
rowNum: 25,
gridview: true,
rowattr: function (rowdata, rowelem) {
    var color = rowelem.Color;
    if (color != 'white') {
        return { "class" : "color-" + color};
    }
},

Upvotes: 1

Related Questions