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

【问题标题】：kendo ui angular2 grid - how to apply class to a grid rowkendo ui angular2 grid - 如何将类应用于网格行
【发布时间】：2017-12-14 01:21:20
【问题描述】：

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

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

【问题讨论】：

到目前为止，您尝试过什么，这不是代码编写服务。 asking this question 很少/没有任何努力。什么是条件逻辑？你在哪里/何时应用逻辑？下面是如何使用rowTemplate根据数据更改行颜色的示例。
我知道这里不是写服务。你至少也应该试着理解我在问什么，而不是在这里开始一场激烈的讨论。问题很简单，condition 在这里无关紧要。那么：如何将 CSS 类应用于 Telerik Angular Grid 中的一行？
我提供了一个示例，最好尝试根据您的 2 行问题猜测您要做什么。条件 is 相关，因为根据应用逻辑的位置可能有不同的解决方案方法（在 dataBound/dataBinding/edit/change 网格事件函数内部，在外部网格的范围）等。因此，我将问题标记为关闭，直到有“足够的细节来确定足够的答案”。

标签： angular telerik telerik-grid

【解决方案1】：

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

【讨论】：

这正是我想要的。见telerik.com/kendo-angular-ui/components/grid/api/GridComponent/…

【解决方案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 公开了行的数据，并且可以在此处评估表达式，从而设置相关样式。

【讨论】：