Filtering grid by multiple columns using custom filter

[Tomek Romek]

Hello Syncfusion,

I needed to create search component outside the toolbar Grid. Decided to create one Input(we paste here string or number) and button(when you press it then grid is filtered).

Now the problem is that, I would like to filter many columns of the grid, but unfortunately it doesn't work as I want. 

   filterTable(): void {

    const value = this.formGroup.value;

    if (value.searchValue !== "") {

      this.grid.filterByColumn('name', 'contains', value.searchValue );

      this.grid.filterByColumn('age', 'contains', value.searchValue );

      this.grid.filterByColumn('city', 'contains', value.searchValue );

    }

Right now this return the rows where all columns contain "searchValue"(use AND statement).

name CONTAINS value.searchValue && age CONTAINS value.searchValue && city CONTAINS value.searchValue

I would like to get all rows where:

name CONTAINS value.searchValue || age CONTAINS value.searchValue || city CONTAINS value.searchValue.

Could you help me with the problem?

[Vignesh Sivagnanam]

Hi Tomek 

Thanks for contacting Syncfusion support 

Based on your query we understand that you want to create the search component outside the grid and perform filtering on the individual columns.  If we perform the filtering one by one the consecutive filtering operation will be performed based on the previous filtered data which is the default behavior. To achieve your requirement we suggest to use the grid.search() function to search the value from the entire data and display the result in the Grid.  

 

Sample : https://stackblitz.com/edit/angular-xecbn8-za7lnn?file=app.component.html 

 

API Link : https://ej2.syncfusion.com/angular/documentation/api/grid/?_ga=2.192311338.1258891744.1610944737-115916227.1594967608#search 

 

Screenshot :  

 

 

Regards 

Vignesh Sivagnanam 

[Tomek Romek]

Hi,

This is what I was looking for. Thanks!

[Tomek Romek]

I find out a problem. I create default filter values and I would like to filter values when the data loads into the grid. So I used (dataBound)='filterInstruments()', but this caused that I have infinite loop(databound is invoked

after each this.grid.search()). How can I solve this problem?

[Vignesh Sivagnanam]

Hi Tomek 

Thanks for the update. 

By default in EJ2 Grid when the data is re-render or refresh the dataBound event will be triggered.  

So, when we perform search operation in Grid the data has been refreshed and the dataBound event will be triggered.  

We have suspect that you have called ‘search’ method in dataBound event of Grid. After searching operation the dataBound event is called automatically. So the same search operation called infinitely.  

To avoid call the dataBound event infinitely when performing searching in the dataBound event.  We suggest to use the following solution. 

Please refer the below code Example and sample for your reference 

Code Example : 

public flag = true; 

……………………….. 

databound() { 

    if (this.flag === true) { 

      this.flag = false; 

      var f = document.getElementById("input").value; 

      this.grid.search(f); 

    } 

  } 

In the above code example, we have called the search method in the dataBound event and avoid infinite triggered by using flag variable 

 

Sample : https://stackblitz.com/edit/angular-xecbn8-fabwwi?file=app.component.ts 

Regards 

Vignesh Sivagnanam 

[Tomek Romek]

Thanks for help.

[Vignesh Sivagnanam]

Hi Tomek 

We are happy to hear that the provided solution works fine at your end. 

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

Regards, 

Vignesh Sivagnanam