[Solved] How to replace Grid Column Menu with Filter

[Samuel]

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. 

 

 

[Stefan]

Hello, Samuel,

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

[Daniel]

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

[Stefan]

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

[Daniel]

Ok thanks and what about the filter icon how can I remain only with the text?

[Stefan]

Hello,

Yes, we can hide the icon with the following CSS:

    .k-columnmenu-item .k-i-filter {
        display: none;
    }

[Daniel]

Thanks.

can you please help me with this issue -

https://www.telerik.com/forums/styling-the-column-menu-icon-not-working

 

[Stefan]

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.

[Abi]

Hi - my colleague and I were trying to change the default icons for the column menus, but neither of us were successful. We followed this example -> https://www.telerik.com/forums/column-menu-filter I see in the comments that there have been some rendering changes and this won't work anymore. Is there a more up to date example? 

export const ColumnFilterMenu = styled(GridColumnMenuFilter)`
  &.k-i-more-vertical::before,
  .k-i-vbars::before {
    content: '\e129';
  }
`;

[Stefan]

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.