Angular Kendo 悬停效果的网格行

Question

我想在用户将鼠标悬停在行上时更改行的背景（有用的帮助，行跟踪）。

我尝试使用 [rowClass] 将 CSS class (<class>:hover) 应用于每一行，这在理论上可行，但不会应用样式.

<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

最直接的方法是通过 CSS 定位悬停的行并添加所需的样式，例如：

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

EXAMPLE