Give a cell or a row of a data grid a color based on an attribute value

Hi there, I have 2 cases for which I need some colors in my data grid: 1. Different background color of the row based on attribute value The color is based on a boolean attribute (active/inactive).  2. Different background color of an (editable) cell of a datagrid based on the value (positive or negative) The color is based on an integer either being positive, negative or 0. What is the easiest way to solve this? Unfortunately, the Data Grid extension is not maintained anymore :( Kind regards, Tim      
4 answers

Hi Tim,

This is possible with default the Mendix datagrid and custom CSS. 

Here is how:

1. Add differentBg as extra class to the datagrid.

2. Add the column from where you want to set the background color at the beginning of the datagrid. You have to set the width of this column to 1px, otherwise Mendix will not compile it in the HTML. 

3. In your custom SASS file add the following line: 

.mx-datagrid.differentBg .mx-datagrid-body-table .mx-datagrid-body tr {
	td[title='active'] ~ td {
	  background: red;

4. Change the title value accordingly.

5. Compile the SASS and run the project.


For the second you can do something similar but then add the following for negative:



This will selects all elements with a title attribute value starting with "-".


Hope this will help.



Unfortunately, I would say the easiest way to achieve this is to use a list view which is formatted to look like a grid with some css. You can then use the enum class widget to add conditional styling -

For the numbers I would add an enum with values: Negative, Zero and Positive and set:
  1) it every time you commit the object in a before commit microflow, and

  2) when the number is changed by the user by using an onchage microflow.


Hi Tim,

You can use the grid cell styler widget to do this. It allows you to write javascript to evaluate each row of a datagrid and then apply a class to it. It also supports multiple rules per grid (so in your case you can write two rules that will apply two different classes). I've tested this widget with a large amount of data and had no issues.

Here is a link to the widget


Also here is a link to the test project to help you get started

The example project uses classes that only changes the text color of each row. I added a custom class to my SASS files to change the entire row color.  The class is called "datagrid-selected.

tr.datagrid-selected td  {
    background-color: skyblue !important;
    font-weight: bold;


Hope this helps!



To add an extra option if you do not wish to use app store content: create a List View and use 2 layout grid rows or 2 containers. Give each the same content, but style them differently as you wish for each condition. Set visibility based on the attribute you want to use.

Just make sure the expressions or values used for visibility are contradicting eachother, in order to prevent not showing anything at all.