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
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;
}
`]