New to Kendo UI for Angular? Start a free 30-day trial

Styling the Grid Column Headers When Filtering is Applied

Environment

Product

Progress® Kendo UI for Angular Grid

How can I style the headers of a Grid column when filtering is applied?

When the grid is filtered, the k-active class is applied to the filter menu. Use CSS nesting to style the header of the filtered column:

css

.k-header:has(.k-active) {
    background-color: #FFF0F5;
    
    .k-column-title {
        color: #191970;
    }
}

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...