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

How to replace Grid Column Menu with Filter

1 Answer 568 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Samuel
Top achievements
Rank 1
Samuel asked on 07 Feb 2019, 04:28 PM

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

Sort by
0
Stefan
Telerik team
answered on 08 Feb 2019, 07:34 AM
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
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
Daniel
Top achievements
Rank 1
Iron
Iron
commented on 29 Nov 2021, 11:50 AM

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
Telerik team
commented on 29 Nov 2021, 12:15 PM

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
Top achievements
Rank 1
Iron
Iron
commented on 29 Nov 2021, 12:26 PM

Ok thanks and what about the filter icon how can I remain only with the text?
Stefan
Telerik team
commented on 29 Nov 2021, 01:04 PM

Hello,

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

    .k-columnmenu-item .k-i-filter {
        display: none;
    }
Daniel
Top achievements
Rank 1
Iron
Iron
commented on 29 Nov 2021, 02:31 PM

Thanks.

can you please help me with this issue -

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

 

Stefan
Telerik team
commented on 30 Nov 2021, 06:02 AM

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
Top achievements
Rank 1
commented on 09 Mar 2022, 07:08 PM

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
Telerik team
commented on 10 Mar 2022, 06:22 AM

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.

Tags
General Discussions
Asked by
Samuel
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or