演示

Question

我想知道是否有办法根据字段的值来格式化行的外观？

感谢。

Answer 1

<kendo-grid>
    <kendo-grid-column>
        <template kendoGridCellTemplate let-dataItem>
            <!--Anything can go here-->
            <!--This is also per column, not per entry in the array-->
        </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中的网格行

2 个答案:

演示