Can I display the different color of a row in a datagrid?

Can I display the different color in different row on the datagrid or different color of character in the different row of datagrid?
2 answers

(In addition to Ronald's answer)

On a DataGrid row the following classes are available:

  • mendixDataGrid_tableRow
  • mendixDataGrid_tableRowEven
  • mendixDataGrid_tableRowOdd
  • mendixDataGrid_tableRowFirst
  • mendixDataGrid_tableRowLast
  • mendixDataGrid_tableRowHover
  • mendixDataGrid_tableRowSelected
  • mendixDataGrid_tableRowFocused (as of 3.0)

On a DataGrid column the following classes are available:

  • mendixDataGrid_tableData
  • mendixDataGrid_tableDataFirst
  • mendixDataGrid_tableDataLast

In addition, it is also possible to make the style depend on the attribute type of the column:

  • mendixDataGrid_tableData[String|Boolean|Currency|Date|Enum|EnumIcon|Float|Integer|Long]

Besides these classes, you can also style rows or columns based on their position in the DataGrid. For instance to give the 2nd column (with index 1) a blue text color:

.customGrid td[column="1"] {
    color: blue;

Or, to give the 3rd row (with index 2) a red background-color:

.customGrid td[row="2"] {
    background-color: red;

To let the styling depend on the attribute shown in a DataGrid column, you could use the key attribute in your css selector:

.customGrid td[key="attributePath"] {
    font-weight: bold;

Tools like the Developer Tools in Chrome and Firebug in Firefox can be used to inspect which classes a particular column or row has.

Bear in mind that these CSS selectors might not work in older versions of Internet Explorer. See this CSS Reference for more information on that.


You can with css adjust the color:

.tundra .mendixDataGrid_tableRowEven {
background-color: #F3F3F3;


.tundra .mendixDataGrid_tableRowSelected .mendixDataGrid_tableData {
background: #EAF86D;


.tundra .mendixDataGrid_tableRowFocused .mendixDataGrid_tableData {
border-style: solid;
border-color: #999;