Kendo React - Grid - External Filter - Hide filter expression but keep the data filtered

1 Answer 44 Views
Filter  Grid
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Jason asked on 22 Dec 2023, 11:28 PM

Good evening,

Is there a way to keep a certain filter expression hidden ("Is not null") while still applying it on External filter?

Please help, thanks!

 

Jason

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 25 Dec 2023, 10:02 AM

Hi,

One possible solution is to use React.useMemo and a separate gridFilter that extends the filter object controlled by the Filter component with the desired hidden filter. Here is the code and the example that worked at my side:

  const defaultFilter = {
    logic: 'or',
    filters: [
      {
        field: 'ProductName',
        operator: 'contains',
        value: 'organic',
      },
      {
        field: 'ProductName',
        operator: 'contains',
        value: 'cranberry',
      },
    ],
  };
  const onFilterChange = (event) => {
    setFilter(event.filter);
  };
  const gridFilter = React.useMemo(() => {
    return { ...filter, filters: [...filter.filters, defaultFilter] };
  }, [filter]);

Here is the example that worked at my side - https://stackblitz.com/edit/react-p2w31q-swxz3t?file=app%2Fmain.jsx

Regards,
Plamen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Filter  Grid
Asked by
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Plamen
Telerik team
Share this question
or