Dynamically change the filter icon background colour when using kendoGridFilterMenuTemplate

[Murray]

When a filter is active in a column header the background colour changes to red by default.

I would like to be able to set it to a different colour depending on the data present in the filter. Is there a way to do this? 

Thanks

[Svet]

Hi Murray,

Indeed, there isn't such built-in feature available that would allow to achieve the required behavior out-of-the-box. However what could be done as a workaround is to set a style for each column header via the headerClass input property. That will allow to differentiate between the different filter menu icons for each column and will provide a way by which the filter menus can be styled differently. Then the applied colors can be set by using some custom JavaScript at any event. Please check the following example where I demonstrate how the filter menu color can be changed on button click for the "ProductName" column following the suggestions:

https://stackblitz.com/edit/angular-uk3ecm?file=app/app.component.ts

A similar implementation can be used and the filter color can be changed on (dataStateChange) or (filterChange) event of the Grid. These events will provide access to the currently applied filters to the Grid and based on them it will be possible to change the color of the required filter menu accordingly as per the project requirements. However, such implementation would be considered custom and the developer should implement the logic within the (dataStateChange) or (filterChange) event that determines what color to set to which column menu filter under what conditions.

I hope the provided details help you to move forward with this case. Please let me know in case I can provide any further assistance on this case. Thank you.

Regards,
Svetlin
Progress Telerik