How to Highlight a Row on Hover in Kendo TreeList with Locked Columns in Angular

#angular #webdev #treelist #kendo

❓How Can I Highlight a Row on Hover in Kendo TreeList with Locked Columns in Angular?

Short Answer:

To highlight an entire row (including locked columns) on hover in a Kendo UI TreeList for Angular, you need to manually apply a CSS class to both the frozen and scrollable parts of the row using mouse events and DOM access.

💬 Question:

"I'm using Kendo UI TreeList in Angular with locked columns. When I hover over a row, I want the entire row—including both the locked and scrollable sections—to be highlighted. The default hover styles don’t apply across the full row. How can I implement this behavior?"

✅ Answer:

Kendo TreeList renders locked columns and scrollable columns in separate HTML tables, so hovering one row doesn’t affect the other part by default. That’s why your row only half-highlights.

To solve this, we:

Detect which row is hovered using Angular mouse events.
Manually apply a CSS class to both rows (locked and scrollable) at the same row index.
Remove the class when the mouse leaves.

🧪 Working Example

👇 Angular Component Code

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { TreeListComponent } from '@progress/kendo-angular-treelist';

@Component({
  selector: 'app-treelist-hover',
  template: `
    <kendo-treelist #treelist
      [kendoTreeListFlatBinding]="data"
      idField="id"
      parentIdField="managerId"
      [height]="400"
      (mouseover)="onMouseOver($event)"
      (mouseout)="onMouseOut($event)"
    >
      <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="200" [locked]="true"></kendo-treelist-column>
      <kendo-treelist-column field="title" title="Title" [width]="200"></kendo-treelist-column>
      <kendo-treelist-column field="phone" title="Phone" [width]="200"></kendo-treelist-column>
    </kendo-treelist>
  `,
  styles: [`
    .hovered-row {
      background-color: lightblue;
    }
  `]
})
export class TreelistHoverComponent implements AfterViewInit {
  @ViewChild('treelist', { static: false }) treelist!: TreeListComponent;

  data = [
    { id: 1, managerId: null, name: "John Doe", title: "CEO", phone: "123-456-7890" },
    { id: 2, managerId: 1, name: "Jane Smith", title: "Manager", phone: "987-654-3210" },
    { id: 3, managerId: 2, name: "Peter Jones", title: "Developer", phone: "555-123-4567" }
  ];

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {}

  onMouseOver(event: MouseEvent): void {
    const target = event.target as HTMLElement;
    const row = target.closest('tr');
    if (row) {
      const rowIndex = (row as HTMLTableRowElement).rowIndex;
      this.highlightRow(rowIndex);
    }
  }

  onMouseOut(event: MouseEvent): void {
    const target = event.target as HTMLElement;
    const row = target.closest('tr');
    if (row) {
      const rowIndex = (row as HTMLTableRowElement).rowIndex;
      this.unhighlightRow(rowIndex);
    }
  }

  highlightRow(rowIndex: number): void {
    const frozenTable = this.el.nativeElement.querySelector('.k-treelist-locked-table');
    const scrollableTable = this.el.nativeElement.querySelector('.k-treelist-table:not(.k-treelist-locked-table)');

    if (frozenTable) {
      const frozenRow = frozenTable.querySelector(`tbody tr:nth-child(${rowIndex + 1})`) as HTMLElement;
      if (frozenRow) frozenRow.classList.add('hovered-row');
    }
    if (scrollableTable) {
      const scrollableRow = scrollableTable.querySelector(`tbody tr:nth-child(${rowIndex + 1})`) as HTMLElement;
      if (scrollableRow) scrollableRow.classList.add('hovered-row');
    }
  }

  unhighlightRow(rowIndex: number): void {
    const frozenTable = this.el.nativeElement.querySelector('.k-treelist-locked-table');
    const scrollableTable = this.el.nativeElement.querySelector('.k-treelist-table:not(.k-treelist-locked-table)');

    if (frozenTable) {
      const frozenRow = frozenTable.querySelector(`tbody tr:nth-child(${rowIndex + 1})`) as HTMLElement;
      if (frozenRow) frozenRow.classList.remove('hovered-row');
    }
    if (scrollableTable) {
      const scrollableRow = scrollableTable.querySelector(`tbody tr:nth-child(${rowIndex + 1})`) as HTMLElement;
      if (scrollableRow) scrollableRow.classList.remove('hovered-row');
    }
  }
}

🔍 Common Questions

Q: Can’t I just use `:hover` in CSS?

A: Unfortunately not. Kendo TreeList splits locked and unlocked columns into different tables. The :hover effect applies only to the section you're hovering, not both.

Q: Will this break if I expand tree nodes?

A: It works fine as long as row indexes stay in sync. If you're dynamically loading or collapsing rows, test to make sure it remains accurate.

Q: How do I change the highlight color?

Just modify this CSS:

.hovered-row {

  background-color: lightblue;

}

🚀 Conclusion

Now you can provide a smooth, full-row hover experience in Kendo TreeList with locked columns. It’s a small but powerful UX upgrade!

🔗 Related Search Terms:

Angular Kendo TreeList row hover
Highlight full row on hover Kendo UI
Kendo UI locked column hover issue
Angular treelist hover styling

Need more Kendo UI help? Drop your questions below! 👇

DEV Community

How to Highlight a Row on Hover in Kendo TreeList with Locked Columns in Angular