This is a migrated thread and some comments may be shown as answers.

Column menu filter

4 Answers 39 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 28 Jan 2019, 02:30 PM

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?

4 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 29 Jan 2019, 08:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Andreas
Top achievements
Rank 1
answered on 30 Jan 2019, 01:29 PM
Exactly what I was looking for! Thanks!!
0
Dhara
Top achievements
Rank 1
Veteran
answered on 07 Sep 2020, 08:47 AM
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.
0
Stefan
Telerik team
answered on 07 Sep 2020, 12:40 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Wrappers for React
Asked by
Andreas
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Andreas
Top achievements
Rank 1
Dhara
Top achievements
Rank 1
Veteran
Share this question
or