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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filtering with filterType 'filterbar'

Thread ID:





132683 Sep 15,2017 06:52 AM UTC Sep 21,2017 05:02 PM UTC Angular 3
Tags: ejGrid
Bernd Schuhmacher
Asked On September 15, 2017 06:52 AM UTC


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?


Vignesh Natarajan [Syncfusion]
Replied On 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 

Bernd Schuhmacher
Replied On 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.



Vignesh Natarajan [Syncfusion]
Replied On 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 


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