为 Angular 2 网格格式化 Kendo UI 中的网格行

Question

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

谢谢。

Answer 1

<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>

编辑：

已更新为较新的模板语法

Answer 2

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

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

为 Angular 2 网格格式化 Kendo UI 中的网格行

Formatting grid's row in Kendo UI for Angular 2 grid

kendo-ui-angular2

演示