When I am filtering a kendo grid, I need to change the color of the "watering can" icon that appears above the columns. I have found a way to run my code on the filtering event:
var originalFilter = self.object.data("kendoGrid").dataSource.filter;
self.object.data("kendoGrid").dataSource.filter = function(e) {
if (e != undefined && e != null) {
var selector = 'th[data-field=' + e.filters[0].field + '] > a > span.k-filter';
$(selector).css('background-color', 'red');
return originalFilter.apply(this, arguments);
}
}
Using this method, I can change the background color of the icon. However, I encounter two problems: 1) After filtering, the value disappears. 2) I need to change the background color to red when a value is entered in the filter input and white when the value is empty. Could you please provide me with an example of code that will achieve this color change for the filter icon?