kendo ui angular2 grid - how to apply class to a grid row

Question

How can I apply a css class to a grid row (TR) based on some condition?

I know I can apply class to a column but not to a whole TR.

Answer 1

first,use rowClass to generate needed class in row based on row data.(row class callback function) second,use css to style row(may bee /deep/ grammer is needed with ViewEncapastion.Emulated). .k-gird /deep/ tr.xxx

Answer 2

Since I have just gone through the same scenario, I will show what I've done. In the grid, set up a function to call from the rowClass property

<kendo-grid
       [rowClass]="rowCallback"
       >

In the component, we create the method/function to evaluate boolean values:

public rowCallback(context: RowClassArgs) {
    return {
      amber: context.dataItem.isRowAmber,
      red: context.dataItem.isRowRed || context.dataItem.isSpentGreaterThanReceived
    };
  }

In the css file, I have two styles:

.k-grid tr.amber { background-color: #ee840a71;  }
.k-grid tr.red { background-color: #af332a7c; }

You can see in the rowCallback function that the context.dataItem, exposes the data for the row, and the expression can be evaluated in here, thus setting the relevant style.