Column menu filter

[Andreas]

I would want to have a column menu with the filter opening at 1 click, instead of first opening the column menu, and the opening the filter box.

An extra plus would be to have an actual filter icon instead of the default 3 dots. See the attached images for more info about what I want to achieve.

What do I need to do?

[Stefan]

Hello, Andreas,

This effect can be achieved with the columnMenu. It will require setting only the "GridColumnMenuFilter" component inside the columnMenu and setting its expanded property to true. This will create the filter menu on open without a second click.

Also, the following CSS will be needed for the icons:

 

.k-i-more-vertical::before, .k-i-vbars::before {
  content: "\e129";
}

This is a full example:

https://stackblitz.com/edit/react-hw19xy-8a9jn7?file=index.html

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Andreas]

Exactly what I was looking for! Thanks!!

[Dhara]

Hi,
We want to display the filter icon highlighted whenever the filters are selected using Kendo React grid.
we have implemented this example: https://www.telerik.com/kendo-react-ui/knowledge-base/filter-the-grid-with-checkboxes/

But not able to highlight the filter icon when one/multiple filter checkboxes are selected. We were able to find the solution in jquery (https://docs.telerik.com/kendo-ui/knowledge-base/sort-multi-checkbox-filter)
But could not find similar option to filterable: { multi: true } } in KendoReact.

[Stefan]

Hello, Dhara,

For the active state, this requires setting the headerClassName programmatically if the filter is part of the filter collection. I made an example showcasing this:

https://stackblitz.com/edit/react-jbuuvw?file=app%2Fmain.jsx  (applied to the ProductID column)

We are also considering adding a built-in method that will return the active state.

Regards,
Stefan
Progress Telerik