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. Image for the cookie policy date

Filtering with filterType 'filterbar'


I stumbled upon a problem when tinkering with filtering a grid.

I use a grid with filterType=’filterbar’. This grid is accessible as 'Grid' in my TypeScript code.

Let’s say I have four columns (Column1, Column2, Column3, Column4).

I want to show all rows where Column1 equals 123, Column2 equals ‘abc’ and Column 4 equals 2 or 4.

I tried setting this with

Grid.widget.filterColumn(Column1, 'equal', 123, ‘and’, true);
Grid.widget.filterColumn(Column2, 'equal', ‘abc’, ‘and’ true);
Grid.widget.filterColumn(Column4, 'equal', 2, ‘or’, true);
              field: ‚Column4‘,
              operator: 'equal',
              value: 4,
              predicate: 'or',
              matchcase: true

If I only add the first 3 filters everything works as expected. If I add the 4th filter every row is with value 4 in the 4th column is shown additionaly even if they do not match filter for ‘Column1’ and ‘Column2’. 

It seems the filtering is done like this with logic operators:
Column1 == 123 && Column2 == ‘abc’ && Column4 == 2 || Column4 = 4

What I like to get would be something like this:
Column1 == 123 && Column2 == ‘abc’ && (Column4 == 2 || Column4 = 4)

Do you have any hint how to achieve this?


3 Replies

VN Vignesh Natarajan Syncfusion Team September 19, 2017 01:18 AM UTC

Hi Bernd, 

Thanks for using Syncfusion products. 

We have analyzed your query and we have achieved your requirement through query property of Grid. Please refer the below code snippet. 
TS code: 
export class GridComponent { 
    public gridData: any;    
    public filterSettings;   
    public queryOrder; 
    constructor() { 
        this.queryOrder = ej.Query().where(ej.Predicate("column1", ej.FilterOperators.equal, 123, true).and("column2", ej.FilterOperators.equal, "abc", true).and(ej.Predicate("column4", ej.FilterOperators.equal, 2, true).or(ej.Predicate("column4", ej.FilterOperators.equal, 4, true)))), 
        this.gridData =  [{ column1: 123, column2: "abc", column3: 10, column4: 1 }, 
JS code: 
<ej-grid [allowPaging]="true"[dataSource]="gridData" [allowFiltering]="true" [query]="queryOrder"> 
        <e-column field="column1" headerText="Column 1" width="75" textAlign="right"></e-column> 
        <e-column field="column2" headerText="Column 2" width="80"></e-column> 

Please refer the below screenshot for the output of the above codes.  


This query method is used to filter the records from database. You cannot clear the filtering. If you want to clear the filter at some point, then use excel filtering   
Please refer our online documentation for your reference. 

For your convenience, we have prepared a sample which can be prepared from below link 

Vignesh Natarajan 

BS Bernd Schuhmacher September 20, 2017 07:02 AM UTC


Thanks for looking into this.

Do I understand it correctly that the query is only used once when setting up the grid? If I change the query at a later time the already loaded data will not be filtered by the new query?

As I need to be able to clear and change the filters at runtime I think I need to switch to "excel" filtering.



VN Vignesh Natarajan Syncfusion Team September 21, 2017 05:02 PM UTC

Hi Bernd, 

Yes. Using query property we are able to set the filtering settings only once. If you want to modify/ clear the Filter during the runtime. you have to choose “Excel” filtering.  

Please refer the below screenshot 


Clicking on the Equal text will open the below dialogbox. 


In excel Filtering you can customize your filtering range. So kindly use Excel filtering if you want to modify/clear the filtering during runtime of the Sample. 

Please refer our online documentation for you reference 

  1. https://help.syncfusion.com/api/angular/grid#members:filtersettings-filtertype
  2. https://help.syncfusion.com/angular/grid/filter#excel-like-filter

We have prepared a sample using excel filtering please refer the below link for the sample 

Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon