Filter component needs an Apply button

[Mat]

There's no option for an Apply button on the Filter component.

The FilterChangeEvent fires with every action, so adding a new criteria triggers the event before the operator and values have been set.

If you've got the Filter hooked up to a Grid, this causes the rows to change in an unwanted way. This is particularly problematic if the data is coming from a remote API as it causes multiple GET requests, often with invalid filter configurations.

I can probably come up with a workaround that stores the value of the filter and only applies it when I click a button, but this shouldn't be necessary.

[Svetoslav Dimitrov]

Hello, Mat,

The FilterChangedEvent exposes the filter (https://www.telerik.com/kendo-react-ui/components/datatools/api/FilterChangeEvent/#toc-filter) that contain the filter descriptors. You can check if any of the values are null and only call your API if there are no null values.

Here is a basic code snippet: https://stackblitz.com/edit/react-iawwex-txffb1?file=app%2Fapp.tsx

Let me know if this helps you move forward.

Regards,
Svetoslav Dimitrov
Progress Telerik

[Mat]

Thanks.

I thought about implementing something like that, but I frequently need to use the 'isnull' and 'isnotnull' filters, which typically don't have a value, so this method doesn't work.

[Svetoslav Dimitrov]

Hello, Mat,

If, in some cases, null is a valid value for your database, what do you think is the best approach we can use to differentiate valid null from invalid null values? 

[Mat]

I've found the best approach is to set the :value of the Filter to a 'temporary' filter ref, rather than using the filter value that's applied to the Grid and then only update the 'real' filter when an Apply Filter button is clicked.

Simple and seems to achieve what I need.

[Yanko]

Hello, Mat,

Thank you very much for sharing your solution here so that more people who face the same case can utilize this approach.