Clear the filter without needing to press enter

Question

Many control, such as the ListBox, support the ability to filter their contents. To do this, the option is enabled which adds a textbox into which some filter text can be entered. Very useful.

To clear the filter so all entries of the list box can be see, its necessary to clear the filter text by clicking on the 'X' or removing the text. Either way, its then necessary to press the enter key.

This makes sense when clearing the text. But when the 'X' is clicked, is it possible to see the unfiltered list without also needing to press the enter key?

Is it also possible to filter as a user types their filter text rather than also have to press the enter key?

Thanks.

Keerthikaran Venkatachalam · Answer

Hi Bill,We have checked your reported
query, and after clearing the filter, the listbox data source was updated
without pressing the enter key. I have attached the video demonstration and a
sample reference.Sample link: https://stackblitz.com/edit/zkc6em-2vxqlt?file=index.ts
If we misunderstood
your query, please provide more details with a video
demonstration and a replicable sample of the issue, or replicate the issue in
our sample. Based on that, we will check and provide you with a
better solution quickly.Please let us know if you need any
further assistance on this.Regards,KeerthiKaran K VAttachment: screencapture_b8311a4f.zip

Bill Seddon · Answer

Sorry, the list box is not a good example. Simple to describe but not so useful for the question.

https://ej2.syncfusion.com/documentation/grid/filtering/filtering

This link is an example of filtering shown in the EJ2 Grid documentation. Find the first blue 'preview' button and click on it to see the example grid with filters on each column. Next enter a filter. I entered 'VI' in the filter box of the 'Customer ID' column and pressed the <Enter> key. The list filters to show 2 rows.

Now click on the 'X' to clear the filter. The filter is cleared but nothing else happens. The list is only refreshed when the <Enter> key is pressed again.

What it will be great to be able to do, is have the list reset when the 'X' button is clicked and not have to press the <Enter> key.

I can see the current behavior is great when there are many rows being shown and it might be time consuming to refresh the grid if the user might first want to enter a different filter.

In my case there are never more than a few 10's of records so speed is never an issue. What is in short supply is user patience. What will be great is if there is a way to change the filter behavior. Or, a way to intercept the click on the 'X' so a KeyUp event can be raised to send the <Enter> keycode.

Thanks

Santhosh Iruthayaraj · Answer

Hi Bill,You can achieve the expected behavior by setting the "filterSettings.mode"
to "Immediate". This will apply filter based on a certain time
interval when entering values in the filter input and clear the filter
immediately when the clear icon (X) is clicked. Additionally, you can modify
the delay in applying filtering when typing using the "filterSettings.immediateModeDelay"
property. This property accepts a number, which will be considered as
milliseconds, and it defaults to "1500". We have prepared a code
snippet and a sample demonstrating this mode. Please find them below for your
reference:

[index.ts]
   
  let grid: Grid = new Grid({
    dataSource: orderData,
    allowFiltering: true,
    filterSettings: {
      mode: 'Immediate',
      immediateModeDelay: 1000, // default value 1500 ms
    },
    .  . 
  .  .  .
  });

Sample: https://stackblitz.com/edit/xpn6tc-rkiz2x?file=index.tsAPI references:
 filterSettings.mode: https://ej2.syncfusion.com/documentation/api/grid/filterSettingsModel/#mode
 filterSettings.immediateModeDelay:
     https://ej2.syncfusion.com/documentation/api/grid/filterSettingsModel/#immediatemodedelay
Regards,Santhosh
I