Change the color of the filtered column header in a Kendo grid

Question

I am doing a project using Kendo controls and I use a single Kendo grid. My requirement is that when I apply filtering for a single column, I want to change the color of the filtered column header. My Kendo Grid Code:

var grid = $("#grid").kendoGrid({ dataSource: { type : "odata", transport : { read: "http://demos.kendoui.com/service/Northwind.svc/Orders" }, schema : { model: { fields: { OrderID : { type: "number" }, Freight : { type: "number" }, ShipName : { type: "string" }, OrderDate: { type: "date" }, ShipCity : { type: "string" } } } }, pageSize : 10 }, filterable: true, sortable : true, pageable : true, columns : [ { field : "OrderID", filterable: false }, "Freight", { field : "OrderDate", title : "Order Date", width : 100, format: "{0:MM/dd/yyyy}" }, { field: "ShipName", title: "Ship Name", width: 200 }, { field: "ShipCity", title: "Ship City" } ] }).data("kendoGrid"); 

Answer 1

When filtering a grid, the filter icon actually changes color, but do you want the whole title to change?

I don’t see any configuration in the grid that would allow you to indicate this or any filter event that you could get into, but this does not make it impossible.

Looking at what happens in the Grid, when filtering a column, an additional .k-state-active class is added to the column header. We can apply CSS that can easily change the background color for this class, but it does not apply to the entire title (the parent TH element), and there is no parent selector in CSS.

I think for this you may have to redefine the update function of the Kendo FilterMenu widget, replacing it with its own function, which then calls the original function. Once you do this, you can extend FilterMenu to add an extra class to the entire header.

 // Grab old refresh function var filterMenu = kendo.ui.FilterMenu.fn; filterMenu.oldRefresh = filterMenu.refresh; // Replace it with our own filterMenu.refresh = function () { filterMenu.oldRefresh.apply(this, arguments); // Add an additional class to the column header if (this.link.hasClass('k-state-active')) { this.link.parent().addClass('k-state-active'); } else { this.link.parent().removeClass('k-state-active'); } }; 

You can then use CSS to adjust the background color for the .k-state-active in the grid header.

 #grid thead .k-state-active { background-color: crimson; } 

You can see it in action here.

Answer 2

Unfortunately, the accepted answer only works when your kendogrid has the columnMenu: false property. If the k-state-active class is active in the column menu. you can see it here: http://demos.kendoui.com/web/grid/column-menu.html .

---

Solution set dataBound: dataBound in kendogrid declaration and call this function

 function dataBound(e) { var filter = this.dataSource.filter(); this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active"); if (filter) { var filteredMembers = {}; setFilteredMembers(filter, filteredMembers); this.thead.find("th[data-field]").each(function () { var cell = $(this); var filtered = filteredMembers[cell.data("field")]; if (filtered) { cell.find(".k-header-column-menu").addClass("k-state-active"); } }); } } function setFilteredMembers(filter, members) { if (filter.filters) { for (var i = 0; i < filter.filters.length; i++) { setFilteredMembers(filter.filters[i], members); } } else { members[filter.field] = true; } } 

Now it will correctly add the k-state-active class to the columns .k-header-column-menu filtered

source: http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/columnmenu-how-to-show-applied-filter.aspx#wGDLlf8GqkuGtkRiIx2Azg

---

On the other hand, if you, like me, prefer to select only the menu icon , you can do this to find the child range containing the menu icon, therefore changing the line

 this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active"); 

in

 this.thead.find(".k-header-column-menu > span").removeClass("k-state-selected"); 

and of course the line

 cell.find(".k-header-column-menu").addClass("k-state-active"); 

in

 cell.find(".k-header-column-menu").find("span").addClass("k-state-selected"); 

In my example, I use the built-in class k-state-selected