Hi, is there anyway to replace the Gird Column Menu directly with the filter component. Instead of having the three dots, replace it with a filter icon that can open up the filter panel. Picture attached.
1 Answer, 1 is accepted
A similar request is discussed in the following forum thread and contains a runnable example:
https://www.telerik.com/forums/column-menu-filter
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Hi,
how can I replace the default icon filter that shows on GridColumnMenuFilter to be a text like here (Show items with value that) - https://www.telerik.com/forums/attachments/909431
Hello,
This can be changed via the messages:
https://www.telerik.com/kendo-react-ui/components/grid/globalization/
The specific message is `grid.filterTitle`
I made an example showcasing this:
https://stackblitz.com/edit/react-k96axp-fya9m4?file=app%2Fes.json
Yes, we can hide the icon with the following CSS:
.k-columnmenu-item .k-i-filter {
display: none;
}
Thanks.
can you please help me with this issue -
https://www.telerik.com/forums/styling-the-column-menu-icon-not-working
Hello,
The following example shows how to add a visual indication that a column has been filtered or sorted via the ColumnMenu:
https://stackblitz.com/edit/react-6s9vyu?file=app%2Fmain.tsx
We are using the active method of the ColumnMenuFilter to check if they have filtering or sorting and then we apply a custom className which we are using to style it.
We will update the example as we have made changes to the rendering which had to be reflected in the example. Apologies for the inconvenience.
export const ColumnFilterMenu = styled(GridColumnMenuFilter)`
&.k-i-more-vertical::before,
.k-i-vbars::before {
content: '\e129';
}
`;
Hello,
I updated the example to use the latest version 5.1.0 and I can still change the icon:
https://stackblitz.com/edit/react-hw19xy-b1sfmh?file=index.html
Please let me know if I missed something.