Clearing column filters without hitting enter does not erase filter

[Andrew Morgan]

Hello,

My issue is that when I click the "X" button in the column filter to clear the filter, the search result does not get cleared. The filter values stay intact even without pressing "Enter."
Please refer below for details -

I’m working on an Angular project using the Syncfusion ejs-grid component with filtering enabled using the [allowFiltering]="true" property. I’m also using a custom filter dropdown to switch between filter modes, as shown below:

 

In my TypeScript, I have the following method to handle the filter mode change:

My issue is that when I click the "X" button in the column filter to clear the filter, the search result does not get cleared. The filter values stay intact even without pressing "Enter."

I would like guidance on how to clear the filter results when clicking the "X" button in the column header or any way to clear the filters programmatically. Can anyone assist with this? I need to implement this functionality and would appreciate any suggestions.

Product Version: Syncfusion 24.2.8

[Dineshnarasimman Muthu]

Hi Andrew Morgan,

Greetings from Syncfusion Support.

We have reviewed your query regarding the filter not cleared when clicking the x icon in the filterbar, the filter is not cleared. We have validated the code snippet which you have attached. We would like to tell you that in the EJ2 grid, we have two modes of filtering for filterbar, onEnter and Immediate modes.

onEnter Mode (Default):

In this mode, filtering is executed only when you press the Enter key in the input field of the FilterBar. The filtering will only be initiated to the column associated with that input field of the FilterBar.

Immediate Mode:

In this mode, filtering is triggered immediately as you type into the input field of the FilterBar. Similarly, the filtering is only be initiated to the column associated with that input field of the FilterBar.

When using Immediate Mode, upon clicking the x icon in the filter bar, the filtering of that column will be cleared without clicking Enter key.

We have prepared a sample implementing this based on the provided code information.

Sample: https://stackblitz.com/edit/angular-hhybghsx?file=src%2Fapp.component.html

We have attached the documentation for your reference.

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/filtering/filter-bar#filter-bar-modes

We have also attached the types of filtering in the grid for your reference.

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/filtering/filtering#enable-different-filter-for-a-column

Regards,

Dineshnarasimman M