CODEWITHSUNDEEP
javascriptjqgrid
araaku
araaku

Reputation: 275

Filtering jqGrid by multiple conditions at client side

I have a jqGrid with some records and want to filter the records based on multiple conditions.

For instance, if there are three columns, Name, Age and City and I want to filter the grid on the following condition:

Name = "Mark" and Age = 25 and City = 'NY'

the following code works fine-

 var grid = jQuery("#memberDetails");
 var postdata = grid.jqGrid('getGridParam', 'postData');

 var filterArray = new Array();
 var filterConidtion; 

 filterConidtion = new Object();
 filterConidtion.field = "name";
 filterConidtion.op = "eq";
 filterConidtion.data = "Mark";
 filterArray.push(filterConidtion);

 filterConidtion = new Object();
 filterConidtion.field = "Age";
 filterConidtion.op = "eq";
 filterConidtion.data = "25";
 filterArray.push(filterConidtion);

 filterConidtion = new Object();
 filterConidtion.field = "City";
 filterConidtion.op = "eq";
 filterConidtion.data = "NY";
 filterArray.push(filterConidtion);

 jQuery.extend(postdata, {
        filters: {
            "groupOp": "and",
            "rules": filterArray
        }
    });

 grid.jqGrid('setGridParam', {
            search: true,
            postData: postdata
    });

 grid.trigger("reloadGrid", [{
        page: 1
    }]);

but I am not sure how to make the following filter work:

Name = "Mark" and Age = 25 and (City = 'NY' OR City = 'FL')

The groupOp works either on AND or on OR condition, not sure how to embed a sub condition within the groupOp

Thanks.

Upvotes: 3

Views: 9538

Answers (1)

Oleg
Oleg

Reputation: 221997

Format of filters are described in the documentation. To implement more complex searching criteria one can use groups property of filters. The corresponding code could be about the following:

var $grid = $("#memberDetails");

$.extend($grid.jqGrid("getGridParam", "postData"), {
    filters: JSON.stringify({
        groupOp: "AND",
        rules: [
            { field: "Name", op: "eq", data: "Mark" },
            { field: "Age",  op: "eq", data: "25" }
        ],
        groups: [
            {
                groupOp: "OR",
                rules: [
                    { field: "City", op: "eq", data: "NY" },
                    { field: "City", op: "eq", data: "FL" }
                ],
                groups: []
            }
        ]
    })
});
$grid.jqGrid("setGridParam", {search: true})
     .trigger('reloadGrid', [{current: true, page: 1}]);

Upvotes: 5

Related Questions