How to remove the clear filter button in a Grid column and add a clear filter operator instead?

1 Answer 286 Views
Filter  Grid
Nick
Top achievements
Rank 1
Nick asked on 05 Oct 2023, 07:47 PM

I'd like to remove the clear filter button that is present in filterable columns by default and instead add a "Clear Filter" option to the filter operators. I'd like to make the clear filter functionality work as it did in a much older version of the library (and on a different platform).

Legacy "NoFilter" Option:

Current State (clear filter button):

I'd like to essentially "move" the clear filter button in the filter row into the filter options menu (in order to save the ~30px of horizontal space per column). In other words, for the sample column above, the options in the filter flyout menu would be:

  • Clear Filter
  • Contains
  • Does not contain
  • ...etc.

And clicking on Clear Filter would clear the filter and collapse the flyout.

I'd prefer not to build an entire custom filter menu to accomplish this. However, looking at the custom filter operator example (here), it isn't clear if injecting a custom Clear Filter operator would be the "correct" way to implement this.

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 09 Oct 2023, 12:01 PM

Hi Nick,

For achieving the desired result you will have to implement custom filterCell with the desired structure, including a custom DropDownList with the operators and the "Clear filter" value:

If further assistance is needed, feel free to contact us again. 

 

Regards,
Konstantin Dikov
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!

Ritu
Top achievements
Rank 1
commented on 10 Oct 2023, 01:43 PM

After trying above approach, I found that we'd need custom Operator for 'Clear/No Filter'. However, looking at the Operators link GridFilterOperator, It allows only build-in operators for field types 'text', 'numeric', 'date' and 'boolean'.

To add filter options on fields, GridFilterOperators interface take array of objects with properties 'text' and 'operator'.

 { text: 'grid.filterContainsOperator', operator: 'contains' },

 

Here, 'text' property does not take any string, only accept grid.<someconstant>. and 'operator' accepts only build-in operators like 'containes', 'isempty' etc.

Our requirement is just to add 'Clear Filter/No Filter' with other FilterOptions and remove Clear filter icon from each field(handled by css).

I also tried this example to add 'NoFilter' instead of 'isnullorempty', it throws error on filter click.

I'd need assistance to know How can custom operator be added and the text which is coming from grid constant?

If you can provide sample code example to add custom Filter operator 'No Filter' option, that would be really helpful.

Thanks,

Ritu

Konstantin Dikov
Telerik team
commented on 12 Oct 2023, 09:45 AM

Hi Ritu,

I have to say that it would not be possible to add new operator that is not present within the available Grid filter operators:

You can modify one of the existing ones, change the text and add custom operator function, but adding a new one is not supported.

Nevertheless, I have created an example demonstrating how to define custom filter cell with a DropDownList containing "Clear Filter" option:

Give this a try and let me know if the result meets your requirements.

Tags
Filter  Grid
Asked by
Nick
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or