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

Question

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

谢谢。

Answer 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

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

编辑：

已更新为较新的模板语法