Styling the Header of the Grid when the Filter Menu is Active

Environment

Description

How can I style the header of the Kendo UI for Angular Grid component when the Filter Menu is active?

Solution

To modify the styles of the Grid header when the Filter Menu is active, you can use CSS nesting to target the .k-active class. The class is added to the Filter Menu when the filtering is applied by the user or programmatically.

Copy Code.k-header:has(.k-active) {
    background-color: #fbeaeb;
        .k-column-title {
            color: #2f3c7e;
        }
}

The following example demonstrates how to style the header of the Grid when the Filter Menu is active.

Suggested Links

• Styling the Grid Cells
• Styling the Grid Rows
• Styling the Grid Columns