CODEWITHSUNDEEP
angularkendo-uikendo-gridkendo-ui-angular2
Joel
Joel

Reputation: 6213

Kendo UI Grid style cell based on template-value

I would like to set the cellStyle of a specific cell based on its value.

If Status == STARTED, i want the background to be green.

If Status == STOPPED, i want the background to be red.

consider this 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>

I've tried using conditional [ngClass] and [ngStyle] but none seem to work, naturally I think I do not have access to the templates value at this point, but only inside the <kendo-grid-column> tag. Accessing the current grid-columns value seems harder than I thought. However, it seems to be possible with rows:

Its totally possible to do if I were to apply the styling on the ng-template, but that wont style the entire gridCell.

Here's a stackblitz demonstrating what I want: https://q12mgf.run.stackblitz.io.

If you would like to play around with the source-code yourself here it is: 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/

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

Upvotes: 0

Views: 3597

Answers (1)

Philipp
Philipp

Reputation: 1884

You could style the cell based on a rowClass. (API Reference)

By conditionally (based on the data-item) adding a class to the whole row and styling the cell based on that 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; }

I've also prepared an example.

Upvotes: 5

Related Questions