New to Kendo UI for Angular? Start a free 30-day trial
Grid Styling the Grouping Header Dropzone and Drag Clue
Environment
| Product | Progress® Kendo UI Grid |
Description
How can I style the group header dropzone and drag clue hint of the Kendo UI for Angular Grid grouping feature?
Solution
When a Grid header column is being dragged, the component renders a div element with the class k-drag-clue, representing the drag clue hint. Through CSS Nesting and the :has pseudo-class, you can style both the drag clue hint and the dropzone of the Grid without requiring JavaScript logic.
css
body:has(div.k-header.k-drag-clue) {
div.k-header.k-drag-clue {
color: white;
background-color: darkblue;
}
.k-grid:active .k-grouping-header {
color: coral;
background-color: lightgreen;
}
}The :active pseudo-class targets the active Grid dropzone specifically, ensuring that styles apply only to that zone and not to other Grids on the page, particularly in cases where multiple Grids are present.
The following example demonstrates how to style the drag clue and the group header dropzone of the Grid.
Change Theme
Theme
Loading ...