Formatting grid's row in Kendo UI for Angular 2 grid

Question

I am wondering if there is a way to format the row\'s appearance based on a field\'s value?

Thanks.

Answer 1

This might be a little too late, but its possible!

HTML

How to style based on row:

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

How to style based on column:

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

Here, status can be started or stopped. So, let's say we want to style the row conditionally based on that value.

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

Note: ViewEncapsulation.None in order to make this work.

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

DEMO

https://stackblitz.com/edit/angular-tylq1k?file=app/app.component.ts

Answer 2

<kendo-grid>
    <kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
            <!--Anything can go here-->
            <!--This is also per column, not per entry in the array-->
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

EDIT:

Updated to newer template syntax