New to Kendo UI for Angular? Start a free 30-day trial
Highlighting the Selected Row in the Gantt Timeline View
Updated on Mar 26, 2026
Environment
| Product | Progress® Kendo UI® for Angular Gantt |
Description
When a Gantt task is selected, the TreeList (left) pane highlights the entire row but the Timeline (right) pane highlights only the task bar. How can I highlight the entire Timeline row when a task is selected?
Solution
Use a CSS rule that targets the timeline table row containing a selected task. The CSS :has() pseudo-class matches the <tr> element that contains a child with the k-selected class.
Add the following style to the component and set ViewEncapsulation.None so the rule can reach into the Gantt internal DOM:
ts
@Component({
encapsulation: ViewEncapsulation.None,
styles: `
.k-gantt-timeline .k-table-row:has(.k-selected) {
background-color: var(--kendo-color-primary-subtle);
}
`,
...
})The --kendo-color-primary-subtle CSS variable adapts to the active Kendo theme, so the highlight color stays consistent with the rest of the component.
The following example demonstrates the full implementation of the suggested approach.
Change Theme
Theme
Loading ...