How to customise icon filter if active

[Isabelle]

I would like to help user to see if a filter is active or not on a GRID 

In my exemple before filter the icon is black

After filter I would like to have another color on my icon (for example red) 

is it possible ?

 

[Hetali]

Hi Isabelle,

By default, the Kendo UI Grid Filter has a style when it is active as seen in the demo in this page. In order to add custom styling, use the following CSS:

.k-grid-header .k-grid-filter.k-state-active {
  background: none;
  color: red;
}

In this Dojo example, I have customized the styling of the Grid Filter Icon in active state.

I hope this helps.

Regards,
Hetali
Progress Telerik

[Isabelle]

Ok great ! Do you know if it is also possible to change the picto ? 

[Hetali]

Hi Isabelle,

The Kendo UI Grid Filter icon can be modified by using the following snippet:

$(".k-icon.k-i-filter").addClass("k-i-zoom k-i-search");
$(".k-icon.k-i-filter").removeClass("k-i-filter");

In this updated Dojo example, I have changed the Grid Filter icon.

Please let me know if this helps or if you have any further questions.

Regards,
Hetali
Progress Telerik