Change Icon Class when filter applied

[Kyou]

Is it possible to change the k-i-filter on the grid column to k-i-filter-clear when the filter is on active state?

[Stoyan]

Hello Raphael,

To achieve this requirement subscribe to the Filter event of the Grid.

 .Events(ev => ev.Filter("filter"))

1. In the handler use the content of the event to get the data of the FilterMenu that applied the filter.
2. Select it by its field with the use of the e.field event data.
   
3. Get the link of the FilterMenu that contains its icon span.
4. If the e.filter is not null, then a filter has been applied to the Grid.
5. Select the icon span with jQuery and change the class k-i-filter to k-i-filter-clear
6. Else if the e.filter is null, the filter has been cleared. Then revert the classes of the icon to their original state

function filter(e) {
            var filterMenu = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMenu");
            var link = filterMenu.link[0].children;
            var iconSpan = link[0];

        if (e.filter != null) {
            $(iconSpan).removeClass("k-i-filter");
            $(iconSpan).addClass("k-i-filter-clear");
        } else {
            $(iconSpan).removeClass("k-i-filter-clear");
            $(iconSpan).addClass("k-i-filter");
        }
    }

The above will only change the appearance of the icon span. Based on your question, I am unsure whether you also need to clear the filter when the k-i-filter-clear icon is clicked. Could you let me know what is the anticipated behavior?

An alternative approach to create a functional button that clears the filters and has the k-i-filter-clear icon is to set the GridFilterMode to Row:

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

Please let me know, if you have further questions.

Regards,
Stoyan
Progress Telerik