Add CSS class to DataView or DataGrid cell based on entity attribute

I would like to have a CSS class (or ID) automatically added to cells in a DataView or DataGrid based on the attribute that is displayed. The reason I want to do this is so that I can colour the cell (or text) differently (or show a different background image) based on the attribute value. For example: I have an enumeration with 3 different statuses: Good, Moderate, Bad. If the status is 'Good' I want the cell background to be green, if the status is 'Moderate' I want the cell background to be yellow, etc. As far as I can see there is no way to do this with the standard DataView or DataGrid. To make this work I would have to create my own versions of the DataView or DataGrid. Does anyone have any suggestions on how to do this? I think it would be a very useful feature and would greatly enhance the styling capabilities of the Mendix UI. Thanks!
2 answers

This is functionality that did exist (in a slightly different form) in a very early version of the Mendix tech.

It was removed back then because it wasn't being used and implementing it as a first-class feature meant adding many new and potentially confusing configuration options to the Modeler. For example,

  • IDs have to be unique in the DOM. In this case IDs could be set multiple times within the same form or collide in multiple instances of the same form existing simultaneously.
  • Using a unique key generator for generating IDs would make the IDs no longer unique (so it has to be CSS class-based)
  • There is no way to validate from the Modeler if there is a corresponding CSS class
  • Does the Enum value affect the CSS on the cell or the row? (Both cases should be handled)
  • Can there be a combination of cell and row settings?
  • Should this only be for Enums? Booleans are a close case. Numbers seem to be close to Booleans, but have different equality problems. How about Strings? Or References?
  • If the value affects the row, how are conflicts in multiple cell/attribute values that affect row-level CSS resolved at run-time?
  • Should potential run-time client-side conflicts here be resolved in the Modeler beforehand?
  • Should this also be a DataView feature?
  • If so, what is the cell restriction for an attribute?
  • Etc

Personally I can see the value in such a feature but it has to be accepted as a feature request and go through the new feature mill for a new release. I suggest that you file a feature request in the support portal for this functionality so it can go through the appropriate channels.


The dataview cases can be solved easily in the modeler, just reproduce the cell 3 times, give each of them their own styling and use conditional formatting to show the proper one.