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

Question

我想根据其值设置特定单元格的细胞风格。

如果状态 == 开始，我希望背景是绿色的。

如果状态 == 停止，我希望背景是红色的。

考虑此表：

   <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]，但似乎没有用，自然而然地，我认为我目前无法访问模板值，而仅在<kendo-grid-column>标签内部。访问当前的网格柱价值似乎比我想象的要难。但是，行似乎有可能：

如果我要在ng-template上应用样式，但这是完全有可能的，但这并不是整个栅格的样式。

这是一个stackblitz，展示了我想要的：https：//q12mgf.run.stackblitz.io。

如果您想在这里玩源代码，那是：https：//stackblitz.com/edit/angular-e5dgt2?file=papp/app.component.ts

tl; dr - 如何根据状态的值对整个单元格进行样式。started = green＆amp;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/layout/style-rows-cells-cell-cells-cells-cells-cells-cells-cells-cells-cells-cells-cells-cells-cells-clop>

Answer 1

您可以基于rowClass样式。（API参考）

通过条件（基于数据项目），将类添加到整个行中，并基于该类造型。

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

我也准备了一个例子。