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

user_522322 0
Viewed 3885

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.

telerik-grid angular telerik
2 Answers

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.

user_14491810
Related