JqGrid Filter Rules – Can we filter based on an Array?

I have to think permanently about the problem with custom sorting operation which I promised you (in comment) to implement in the future version of jqGrid from my fork. At the end I do implemented the feature now. I present it below.

The first demo uses Searching Toolbar and the second demo uses Advanced Searching. Both uses common jqGrid settings which allows to make custom searching operation on local data.

First of all new custom searching operation need be defined. I uses in the demo IN operation which allows to define one rule with multiple values. I use the custom operation in the column “tax”. It allows to filter for multiple values divided by semicolon (;). The corresponding code looks like below

$("#grid").jqGrid({
    colModel: [
        { name: "tax", label: "Tax", width: 100, template: "number",
            //sopt contains CUSTOM operation "nIn"
            searchoptions: { sopt: ["nIn", "eq", "ne", "lt", "le", "gt", "ge", "in", "ni"] } },
        ...
    ],
    customSortOperations: {
        // the properties of customSortOperations defines new operations
        // used in postData.filters.rules items as op peroperty
        nIn: {
            operand: "nIN",        // will be displayed in searching Toolbar for example
            text: "numeric IN",    // will be shown in Searching Dialog or operation menu in searching toolbar
            title: "Type multiple values separated by semicolon (";") to search for one from the specified values",
            buildQueryValue: function (otions) {
                // the optional callback can be called if showQuery:true option of the searching is enabled
                return otions.cmName + " " + otions.operand + " (" + otions.searchValue.split(";").join("; ") + ") ";
            },
            funcName: "myCustomIn" // the callback function implements the compare operation
        }
    },
    myCustomIn: function (options) {
        // The method will be called in case of filtering on the custom operation "nIn"
        // All parameters of the callback are properties of the only options parameter.
        // It has the following properties:
        //     item        - the item of data (exacly like in mydata array)
        //     cmName      - the name of the field by which need be filtered
        //     searchValue - the filtered value typed in the input field of the searching toolbar
        var fieldData = options.item[options.cmName],
            data = $.map(
                options.searchValue.split(";"),
                function (val) {
                    return parseFloat(val);
                }
            );
        return $.inArray(parseFloat(fieldData), data) >= 0;
    }
});

As the result the operation "nIn" will be placed in op property of filters.rules in the same way like the standard "en" operation for example. jqGrid displays the operation as "nIN" in the searching toolbar (see the valeu of operand: "nIN" property). The property tooltip defines the tooltip displayed over the operation.

enter image description here

and one can filter the results like on the animated gif below

enter image description here

During the filtering jqGrid calls myCustomIn callback. So one is absolutely free how to implement the corresponding operation.

In the same way one can use Advanced Searching too:

enter image description here

UPDATED: The wiki article describes the new feature more detailed.

Leave a Comment