Clear Filter Button Does Not Reset Filter Values in KendoReact Grid

[Trustin]

I have added a button in the Grid's toolbar to clear all filters. However, when the button is clicked, the filter object is set to null, but the filter values in the UI are not reset. This creates a discrepancy between the displayed filter values and the actual filtered data.

Steps to Reproduce:

Add a button in the Grid's toolbar to clear all filters.

Apply some filters to the grid.

Click the clear filter button.

Observe that the filter values in the UI do not reset, even though the filter object is set to null.

Expected Result:
Clicking the clear filter button should reset both the filter object and the displayed filter values in the UI.

Actual Result:
The filter object is set to null, but the displayed filter values in the UI remain unchanged.

Solution Attempted:
I have placed a Button component within the GridToolbar and set the filter object of the DataState stored in the state to null within its click event. However, this does not reset the UI filter values.

Demo code: https://stackblitz.com/edit/react-e4qxtaef?file=app%2Fapp.jsx

Document reference: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-add-clear-filters-button

Additional Information:

The issue persists regardless of the theme used.

No error messages are displayed in the console.

Request:
Please investigate and provide a solution to ensure that the clear filter button resets both the filter object and the displayed filter values in the UI.

[Trustin]

I found that using filter: [] instead of filter: null works to clear the filters correctly. However, this approach causes an error when used with GridColumnMenuFilter. Here is the code snippet that works for clearing filters:

const clearFilters = (ev) => {
    let updatedState = createDataState({ ...dataState, filter: [] }); // here the filter object is set to an empty array
    setResult(updatedState.result);
    setDataState(updatedState.dataState);
}

But this results in an error when interacting with GridColumnMenuFilter. The error suggests that the grid does not handle an empty array for the filter state correctly in all contexts.

Request:
Please investigate and provide a solution to ensure that the clear filter button resets both the filter object and the displayed filter values in the UI without causing errors with GridColumnMenuFilter.

This is my latest investigation; it'll work for both the default filter and GridColumnMenuFilter:

const clearFilters = (ev) => {
    let updatedState = createDataState({ ...dataState, filter: {filters:[]} }); // here the filter object is set to an empty array
    setResult(updatedState.result);
    setDataState(updatedState.dataState);
}

It's just a workaround solution; please refer to a better solution in the next version.

[Yanko]

Hello, Trustin,

To address the issue of resetting both the filter object and the displayed filter values in the UI without causing errors with the GridColumnMenuFilter, you can use the structured approach you mentioned. Here's a refined solution and some additional considerations:

Recommended Solution

Instead of setting the filter to an empty array or null, use an object with an empty filters array and a set logic operator. This ensures compatibility with the GridColumnMenuFilter:

const clearFilters = (ev) => {
    let updatedState = createDataState({ ...dataState, filter: {logic: "and", filters: []} });
    setResult(updatedState.result);
    setDataState(updatedState.dataState);
}

Explanation

• Filter Structure: The `filter: {logic: "and", filters: []}` structure is the expected format for filters in KendoReact. This prevents errors when interacting with components like GridColumnMenuFilter.

• UI Consistency: Using this approach ensures that both the filter object and the displayed filter values in the UI are reset, maintaining consistency between the data and the UI.

Regards,
Yanko
Progress Telerik