Different Background Colors for Datagrid Rows

I would like the background color for an entire row in a datagrid to change based on attribute values. For instance, if a numeric attribute value in the row is negative, background color is red, if this attribute value is positive, background color is green, etc. Has anyone done this or have any ideas about how to do this?
3 answers


Have a look at this forum item the option you want is described next to other styling for the grids.

Just a small update: add this to your style sheet:

.customcell td[title^="-"] div {
    color: white;
.customcell td[title^="-"]  {
    background-color: red;

Then add customcell as class to your grid and on a negative value the cell will turn red with white text. To style a cell green if positive you can use the not css selector: like not([title^="-"]) Then you can set the cell to green if positive. Not completely what you asked for as it will not set the complete row, but a step in the desired direction I think.


Download the Bootstrap from the appstore. Click Tables / view details and you have an example on how to achieve this.




Hi Mike,

You can also check out


The CSS class of a row in a table is changed based on the value of the columns. Booleans, enumerations and string can be used. When a column is made width of 0 it can be used for the styling but will not shown

Cheers Andries