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, eg:
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid tr:hover {
background-color: yellow;
}
`]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.