【问题标题】：Formatting grid's row in Kendo UI for Angular 2 grid在 Angular 2 网格的 Kendo UI 中格式化网格的行
【发布时间】：2017-03-16 19:08:44
【问题描述】：

我想知道是否有一种方法可以根据字段的值来格式化行的外观？

谢谢。

【问题讨论】：

标签： kendo-ui-angular2

【解决方案1】：

这可能有点晚了，但有可能！

HTML

如何根据行设置样式：

<kendo-grid [data]="gridData" [rowClass]="rowCallback">
     <kendo-grid-column field="machineName" title="Machine">
     </kendo-grid-column>
     <kendo-grid-column field="article" title="Article">
     </kendo-grid-column>
     <kendo-grid-column field="status" title="Status">
     </kendo-grid-column>
</kendo-grid>

如何根据列设置样式：

<kendo-grid [data]="gridData" [rowClass]="cellCallback">
     <kendo-grid-column field="machineName" title="Machine">
     </kendo-grid-column>
     <kendo-grid-column field="article" title="Article">
     </kendo-grid-column>
     <kendo-grid-column field="status" title="Status" [class]="{'yourCssClass':true}>
     </kendo-grid-column>
</kendo-grid>

在这里，status 可以是 started 或 stopped。所以，假设我们要设置该行的样式有条件地基于该值。

CSS

.green .stopCodeColor {background-color: #00c853 !important;}
.red .stopCodeColor {background-color: #d50000 !important;}
.yellow .stopCodeColor {background-color: #ffd600!important;}
/***** below are only used for ROW-styling ****/
.redRow {background-color: #d50000 !important;}
.greenRow {background-color: #00c853 !important;}
.yellowRow {background-color: #ffd600!important;}

TS

private rowCallback = (context: RowClassArgs) => {
  switch (context.dataItem.status) {
      case "STOPPED":
          return "redRow";
      case "STARTED":
          return "greenRow";
      case "ERROR":
          return "yellowRow";
      default:
          return {};
  }
}
private cellCallback = (context: RowClassArgs) => {
  switch (context.dataItem.status) {
      case "STOPPED":
          return "red";
      case "STARTED":
          return "green";
      case "ERROR":
          return "yellow";
      default:
          return {};
  }
}

注意： ViewEncapsulation.None 以完成这项工作。

API：https://www.telerik.com/kendo-angular-ui/components/grid/api/RowClassArgs/

演示

https://stackblitz.com/edit/angular-tylq1k?file=app/app.component.ts

【讨论】：

谢谢@Joel。 ViewEncapsulation.None 要求是否有原因？我担心这会干扰应用程序的全局 CSS。
@dpdragnev 您可以做的是使用组件选择器为 css 类添加前缀。在这种情况下是：my-app .green .etc.etc.etc 然后它不会渗入您的全局 CSS。如果这回答了您的问题，请将其标记为答案。谢谢。
知道了，我只是想知道为什么需要 ViewEncapsulation.None。
@dpdragnev 因为我们正在使用另一个模块，我们正在尝试将样式加载到（我们的组件 => kendo）。我们需要将 viewencapsulation 设置为 none。这意味着：根本没有 Shadow DOM。因此，也没有样式封装。

【解决方案2】：

<kendo-grid>
    <kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
            <!--Anything can go here-->
            <!--This is also per column, not per entry in the array-->
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

编辑：

更新为更新的模板语法

【讨论】：

"let-" 仅支持 ng-template 元素，所以上面的代码将不再工作
@MihirKale 写这个时，语法是“模板”，写完之后的某个时候，语法变成了“ng-template”。我现在已经更新了答案