how to define filter for one column with OR operator

[amsm]

I have a grid with column named "Role".

This grid has data bound for column "Role": [{role: 'actor'}, {role: 'actress'}, {role: 'other'}].

I would like to filter my grid to show only rows containing roles 'actor' or 'actress' using filter with OR operator.

To do this I was trying to create filter for grid's method "filterColumn":

grid.filterColumn( [ 

{ field: 'role', operator: 'equal', value: 'actor', predicate: 'or', matchcase: true},

{ field: 'role', operator: 'equal', value: 'actress', predicate: 'or', matchcase: true}

] );

but above filter doesn't work.

So please explain, how to define and apply complex filter for one column with OR operator ?

Best regards,

Adam

[Vignesh Natarajan]

Hi Adam, 

 

Thanks for contacting Syncfusion Support. 

 

From your query, we understand that you need to filter the same column with multiple value during initial rendering. We have achieved your requirement using filterSettings API of Grid. We have performed Filtering for two values “VINET” and “TOMSP” on the column CustomerID  on initial rendering using model.filterSettings.filteredColumns.   

 

Please refer to the code example:- 

 

<div id="Grid"></div> 

   <script type="text/javascript"> 

            $(function () { 

                $("#Grid").ejGrid({ 

                    dataSource: window.gridData, 

                    allowPaging: true, 

                    allowFiltering: true, 

                    enableHeaderHover: true, 

                    filterSettings: { 

                        filterType: "excel", filteredColumns: [{ field: "CustomerID", operator: "equal", value: "VINET", predicate: "or", matchCase: true }, 

                        { field: "CustomerID", operator: "equal", value: "TOMSP", predicate: "or", matchCase: true }] 

                    }, 

                    columns: [ 

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, 

                        { field: "CustomerID", headerText: "Customer ID", width: 120 }, 

                         .   .     . 

                   ] 

                }); 

 

            }); 

 

</script> 

 

Sample Link:- https://jsplayground.syncfusion.com/qym5hmlv 

 

Documentation Link:- https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Vignesh Natarajan 

[amsm]

hi,

thank You for answer.

well... this can be useful,

but how can I apply this filter on demand, after initial rendering, for example on "dataBound" event ?

... and why "filterColumn" method doesn't work with this filter ?

best regards,

Adam.

[Vignesh Natarajan]

Hi Adam, 

 

Thanks for the update.  

 

Query: “ how can I apply this filter on demand, after initial rendering, for example on "dataBound" event ?” 

 

As per your requirement we have achieved your requirement using dataBound event by pushing the filterColumn values to filterSettings and calling the refreshContent() method to change the value in Grid. refer the below code example 

 

  $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                allowFiltering: true, 

                enableHeaderHover: true, 

              dataBound: function(args){ 

              this.model.filterSettings.filteredColumns = [ 

                { field: "CustomerID", operator: "equal", value: "VINET", predicate: "or", matchCase: true }, 

                { field: "CustomerID", operator: "equal", value: "TOMSP", predicate: "or", matchCase: true } 

              ] 

              this.refreshContent(); 

              }, 

              filterSettings: { filterType:"excel"}, 

                columns: [ 

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, 

                        { field: "CustomerID", headerText: "Customer ID", width: 120 }, 

                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 130 }, 

                        { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right,format: "{0:C2}", width: 80 }, 

                        { field: "ShipCity", headerText: "Ship City", width: 90 }, 

                        { field: "Verified", headerText: "Verified", width: 90 } 

                ] 

            }); 

                   

 

    

Refer the below link for the modified sample 

 

Sample: https://jsplayground.syncfusion.com/gzejnxrh  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns  

 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent  

 

Query: “why "filterColumn" method doesn't work with this filter ?” 

 

It is not possible to filter the same column with multiple value using filterColumn(). You can use filterColumn method to filter multiple column with different values.  

 

Regards, 

Vignesh Natarajan 

[amsm]

hi,

thank You for help.

this is what I'm looking for.

but I wonder why the option method doesn't work when I try to set filter value ?

$("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowFiltering: true, 

              dataBound: function(args){ 

              this.option( { filterSettings: { filteredColumns = [ 

                { field: "CustomerID", operator: "equal", value: "VINET", predicate: "or", matchCase: true }, 

                { field: "CustomerID", operator: "equal", value: "TOMSP", predicate: "or", matchCase: true } 

              ]  } } );

              this.refreshContent(); 

              }, 

              filterSettings: { filterType:"excel"}, 

                columns: [ 

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, 

                        { field: "CustomerID", headerText: "Customer ID", width: 120 }, 

                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 130 }, 

                        { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right,format: "{0:C2}", width: 80 }, 

                        { field: "ShipCity", headerText: "Ship City", width: 90 }, 

                        { field: "Verified", headerText: "Verified", width: 90 } 

                ] 

            }); 

[Vignesh Natarajan]

Hi Adam, 

 

We have analyzed the reported issue and we are able to reproduce the it at our end. We have confirmed it is bug and logged defect report (“filterSettings is not updated properly through setModel”). The fix for the issue will be included in our next release 2018 Volume 4 Service pack 1 which is scheduled to rolled out by the month of January 2019.  

 

Till then kindly use the solution provided in previous update. 

 

Regards, 

Vignesh Natarajan