We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

how to define filter for one column with OR operator

Thread ID:

Created:

Updated:

Platform:

Replies:

141477 Dec 13,2018 11:40 AM UTC Dec 18,2018 12:06 PM UTC jQuery 5
loading
Tags: ejGrid
amsm
Asked On December 13, 2018 11:40 AM UTC

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 [Syncfusion]
Replied On December 14, 2018 06:33 AM UTC

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> 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Vignesh Natarajan 


amsm
Replied On December 14, 2018 08:19 AM UTC

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 [Syncfusion]
Replied On December 17, 2018 09:10 AM UTC

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 
 
 
Refer our help documentation for your reference 
 
 
 
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
Replied On December 17, 2018 11:24 AM UTC

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 [Syncfusion]
Replied On December 18, 2018 12:06 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon