CODEWITHSUNDEEP
javascriptcsskendo-uikendo-grid
user2049357
user2049357

Reputation: 321

Changing the color of a filtered column header in Kendo Grid

I am doing a project using Kendo controls and I am using one Kendo grid. My requirement is when I apply the filtering for one column, I want to change the colour of the filtered column header. My Kendo grid code is:

    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");

Upvotes: 5

Views: 8843

Answers (2)

Vland
Vland

Reputation: 4272

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

Solution set the dataBound: dataBound in the 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 .k-header-column-menu filtered column

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 highlight only the menu icon, you can do that finding the child-span containing the menu icon, therefore changing the line 

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

to:

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");

to:

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

In my example I'm using the builtin k-state-selected class

Upvotes: 2

Matt B
Matt B

Reputation: 8653

When you filter the Grid the filter icon actually changes color but you'd like the entire header to change?

I can't see any configuration on the grid that would allow you to specify this or any filter event that you could hook into, however that doesn't make it impossible.

Looking at what happens in the Grid, when you filter a column an additional class of .k-state-active is added to the filter icon in the column header. We can apply some CSS that would change the background color for that class quite easily, however it doesn't apply to the whole header (the parent TH element) and there's no parent selector in CSS.

I think in order to do this you might have to override the refresh function of the Kendo FilterMenu widget, by replacing it with your own function that then calls the original function. Once you've done this you can extend the FilterMenu to add an additional 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 .k-state-active within the grid header.

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

You can see it in action here

Upvotes: 6

Related Questions