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

Question

如何根据某些条件将 css class 应用于网格行 (TR)？

我知道我可以将 class 应用于列，但不能应用于整个 TR。

Answer 1

首先，使用rowClass根据行数据生成需要的class行。（行class回调函数）其次，使用 css 来设置行的样式（ViewEncapastion.Emulated 可能需要 bee /deep/ grammer）。 .k-gird /深/ tr.xxx

Answer 2

由于我刚刚经历过同样的场景，所以我将展示我所做的。在网格中，设置一个从 rowClass 属性

调用的函数

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

在组件中，我们创建 method/function 来评估 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暴露了行的数据，表达式可以在这里求值，从而设置相关的样式。

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

kendo ui angular2 grid - how to apply class to a grid row

telerik

telerik-grid

angular