Kendo UI 基于模板值的网格样式单元格

Question

我想根据其值设置特定单元格的 cellStyle。

如果Status == STARTED，我希望背景为绿色。

如果Status == STOPPED，我希望背景是红色的。

考虑这个 table:

   <kendo-grid [data]="gridData" style="height: 200px">
     <kendo-grid-column field="machineName" title="Machine">
     </kendo-grid-column>
     <kendo-grid-column field="article" title="Article">
     <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.article}}
     </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="status" title="Status">
     </kendo-grid-column>
   </kendo-grid>

我试过使用条件 [ngClass] 和 [ngStyle] 但 none 似乎有效，自然我想我此时无法访问模板值，但只能在 <kendo-grid-column> 标签。访问当前的网格列值似乎比我想象的要难。但是，似乎可以使用行：

如果我要在 ng-template 上应用样式，这是完全可能的，但这不会为整个 gridCell 设置样式。

这是一个展示我想要的东西的 stackblitz：https://q12mgf.run.stackblitz.io。

如果你想在这里自己玩弄源代码，它是：https://stackblitz.com/edit/angular-e5dgt2?file=app%2Fapp.component.ts

TL;DR - How do I style the ENTIRE cell based on Status' value. started = green & stopped = red.

API: https://www.telerik.com/kendo-angular-ui/components/grid/styling/

资源：https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

Answer 1

您可以根据 rowClass 设置单元格的样式。 (API Reference)

通过有条件地（基于数据项）向整行添加 class 并根据 class.

设置单元格样式

component.ts

@Component({...})
export class MyComponent {
    ...

    public rowClassCallback = (context: RowClassArgs) => {
        switch (context.dataItem.status) {
            case 'Started':
                return { started : true };
             case 'Stopped':
                return { stopped : true };
             default:
                return { };
        }
    }
}

component.html

<kendo-grid [data]="gridData" [rowClass]="rowClassCallback">
    <kendo-grid-column field="status" title="Status" class="statusColumn">
    </kendo-grid-column>
    ...
</kendo-grid>

component.css

.started .statusColumn { background-color: green; }
.stopped .statusColumn { background-color: red; }

我也准备了example.

Kendo UI 基于模板值的网格样式单元格

Kendo UI Grid style cell based on template-value

kendo-ui

kendo-grid

kendo-ui-angular2

angular