Angular Kendo Grid Row on hover effect

Question

I would like to change the row's background when the user hovers over them (useful help, row tracking).

I tried to apply a CSS class (<class>:hover) to every row using [rowClass], which works in theory, but the style won't get applied.

<kendo-grid [rowClass]="rowCallback" [data]="gridData" [height]="410"> ...

export class AppComponent {
    public gridData: any[] = products;

    rowCallback(context) {
      return 'styler';
    }
}

Stackblitz: https://stackblitz.com/edit/grid-hover-color-test

Answer 1

The most straight-forward approach would be to target the hovered rows via CSS and add the desired styling, e.g.:

encapsulation: ViewEncapsulation.None,
styles: [`
  .k-grid tr:hover {
    background-color: yellow;
  }
`]

EXAMPLE