How to customise icon filter if active

1 Answer 21 Views
Grid
Isabelle
Top achievements
Rank 1
Isabelle asked on 23 Mar 2022, 10:01 AM

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 ?

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 25 Mar 2022, 04:43 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Isabelle
Top achievements
Rank 1
commented on 04 Apr 2022, 07:49 AM

Ok great ! Do you know if it is also possible to change the picto ? 
Hetali
Telerik team
commented on 04 Apr 2022, 10:11 PM

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

 

Tags
Grid
Asked by
Isabelle
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or