Show/Hide Column Menu filter

[Layla]

Hello there. We have a grid using the process method to filter rows. We're currently using version 5.16.1, Typescript and wanted know if there was a way to dynamically hide (or show) the column menu filter icons in the header using an external button's onClick function?

In our project, we have columns that are using a custom header cell so filtering is not available on those specific columns. However, we just want to be able to click a button outside of the grid that can toggle the filter icons to show which columns are available to filter at the same time.

Would that be possible?

[Konstantin Dikov]

Hello Layla,

There are few options that can be used for dynamically enabling/disabling the columnMenu, but the most convenient would be by using a state variable and set the columnMenu of all columns to "null" if the value is "false". Here is an example with this approach:

• https://stackblitz.com/edit/react-r6hrkk?file=app%2Fmain.jsx

Another option would be to dynamically add a class name to the Grid and hide the column menu element with CSS.

 

Regards,
Konstantin Dikov
Progress Telerik