kendo ui angular2 grid - 如何将类应用于网格行

Question

如何根据某些条件将css类应用于网格行（TR）？

我知道我可以将类应用于列而不是整个TR。

Answer 1

首先，使用rowClass根据行数据生成所需的行。（行类回调函数） 第二，使用css来设置样式行（ViewEncapastion.Emulated需要bee / deep / grammer）。      .k-gird / deep / tr.xxx

Answer 2

由于我刚经历过相同的场景，所以我将展示我所做的事情。在网格中，设置要从rowClass属性调用的函数

<kendo-grid
       [rowClass]="rowCallback"
       >

在组件中，我们创建用于评估boolean值的方法/函数：

public rowCallback(context: RowClassArgs) {
    return {
      amber: context.dataItem.isRowAmber,
      red: context.dataItem.isRowRed || context.dataItem.isSpentGreaterThanReceived
    };
  }

在css文件中，我有两种样式：

.k-grid tr.amber { background-color: #ee840a71;  }
.k-grid tr.red { background-color: #af332a7c; }

您可以在rowCallback函数中看到context.dataItem公开了该行的数据，并且可以在此处评估表达式，从而设置了相关样式。