Filtering with filterType 'filterbar'

[Bernd Schuhmacher]

Hi

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);
Grid.widget.model.filterSettings.filteredColumns.push({
              field: ‚Column4‘,
              operator: 'equal',
              value: 4,
              predicate: 'or',
              matchcase: true
            });
Grid.widget.model.refreshContent();

If I only add the first 3 filters everything works as expected. If I add the 4^th filter every row is with value 4 in the 4^th 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?

Regards
Bernd

[Vignesh Natarajan]

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-columns>       

        <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. 

1.       https://help.syncfusion.com/api/angular/grid#members:query  

2.       https://help.syncfusion.com/api/angular/grid#members:filtersettings-filteredcolumns-field  

3.       https://help.syncfusion.com/angular/grid/filter#excel-like-filter  

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

Link: http://www.syncfusion.com/downloads/support/forum/132683/ze/angular2-seeds1236348622  

Regards, 

Vignesh Natarajan 

[Bernd Schuhmacher]

Hi

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.

Regards

Bernd

[Vignesh Natarajan]

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 

Sample: http://www.syncfusion.com/downloads/support/forum/132683/ze/angular2-seeds_-_Copy-1207566043     

Regards, 

Vignesh Natarajan