Question

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

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

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

考虑此表：

   <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上应用样式，那是完全有可能的，但这不会对整个gridCell进行样式设置。

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

如果您想亲自使用源代码，请访问：https://stackblitz.com/edit/angular-e5dgt2?file=app%2Fapp.component.ts

TL; DR -如何根据“状态”值设置整个单元格的样式。 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）

有条件地（基于数据项）在整个行中添加一个类，并根据该类对单元格进行样式设置。

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网格样式单元格

1 个答案: