4

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.

Skorunka František
  • 5,102
  • 7
  • 44
  • 69
  • What have you tried so far, this isn't a code writing service. Little/no effort has went in to [asking this question](https://stackoverflow.com/help/how-to-ask). What is the conditional logic? Where/when do you apply the logic? Here is an example of how to change row color based on data using [`rowTemplate`](http://www.telerik.com/forums/conditionally-changing-the-row-color). – Sandman Jul 10 '17 at 10:51
  • I know it is not writing service here. You should also at least try to understand what I'm asking and not starting a flame discussion here. The question is very simple and the `condition` is irrelevant here. So: How to apply a css class to a row in a Telerik Angular Grid? – Skorunka František Jul 10 '17 at 11:41
  • To which I provided an example, with the best attempt at guessing what you are trying to do based on your 2 line question. The condition _is_ relevant as there may be different approaches to a solution based on where the logic is being applied (inside `dataBound`/`dataBinding`/`edit`/`change` grid event functions, outside the scope of the grid) etc. Therefore I am flagging the question as to be closed as to broad until there is "_enough detail to identify an adequate answer_". – Sandman Jul 10 '17 at 12:03

2 Answers2

6

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

jackjoy
  • 101
  • 1
  • 2
3

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.

Christian Phillips
  • 18,399
  • 8
  • 53
  • 82