Customise the colour of the clear filter icon

1 Answer 125 Views
Filter  Grid
Christian
Top achievements
Rank 1
Iron
Iron
Iron
Christian asked on 13 Apr 2023, 07:42 AM | edited on 13 Apr 2023, 08:19 AM

Hey Kendo - Team,

is there an example somewhere of how I can customise the Clear Filter icon? Currently it escapes the user as the difference is not clear enough and I would like to highlight it more clearly in the form of the corporate identity colour so that a set filter is more recognisable.

I would like to assign a style to our GridColumn abstraction that is applied to the class of the active clear icon.


k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button k-clear-button-visible

Thank you in advance.

Christian
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Apr 2023, 12:01 PM

Excuse me for asking this question. I asked hastily. It is relatively easy to adjust the colour via the CSS class.

1 Answer, 1 is accepted

Sort by
1
Joana
Telerik team
answered on 14 Apr 2023, 02:02 PM

Hello Christian,

No worries. I am glad that you have already customized the styling of the clear icon. 

To have a reference in this thread, I will give a tip for the customization. Indeed, you might style the clear button icon through css. An example selector that can be used is:

// my add custom class to the grid to have more specific selector as this one will apply to any component implementing this rendering in a filter row.

.k-filtercell-operator .k-icon.k-i-filter-clear {
    color: blue;
}

Regards,
Joana
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.

Tags
Filter  Grid
Asked by
Christian
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Joana
Telerik team
Share this question
or