You can style an individual cell in a ViewModel table or grid by adding a companion string attribute named after the displayed column; use this when the appearance must vary from row to row.
Style one cell per row
For a rendered column named Attribute1, add a string attribute named:
Attribute1_Style
The value of Attribute1_Style supplies the style for the Attribute1 cell in that row. The name is case-sensitive in practice because it must match the column name that the table renders.
For example, a table that shows an order status can contain these ViewModel attributes:
| ViewModel attribute | Purpose | Example value |
|---|---|---|
Status
|
The displayed column. | Overdue
|
Status_Style
|
A string companion attribute that styles the Status cell for its row.
|
background-color:#ffcccc;
|
Set the value of the companion attribute from the row data. For example, an OCL expression for Status_Style can return a red background when the status is overdue and an empty string for other rows:
if Status = 'Overdue' then 'background-color:#ffcccc;' else '' endif
This affects the Status cell for each row independently. A row whose status is Overdue can therefore be highlighted while other rows remain unchanged.
Choose the right styling scope
| Requirement | Add to the table ViewModel | Result |
|---|---|---|
| Style every cell in one rendered column the same way | Set the column's Style ref in MDriven Designer. | Styles the entire column. |
| Style all cells in one row | A string attribute named Style or CssClass.
|
Styles the row. |
| Style one column's cell differently in each row | A string attribute named <ColumnName>_Style or <ColumnName>_CssClass.
|
Styles that cell only. |
For example, Amount_Style can highlight only the amount cell for orders over a threshold. In contrast, Style applies to the entire order row.
Use Style or CssClass
Use _Style when you need to provide an HTML style value. Use _CssClass when you want the rendered cell to receive a CSS class name.
| Companion attribute | Use it for | Example returned value |
|---|---|---|
Amount_Style
|
An inline CSS declaration. | background-color:#ffeeaa;
|
Amount_CssClass
|
A class defined in your application's CSS. | warning
|
For CSS-based clients, CssClass is the maintainable choice when the same visual rule is reused. Define the class in your CSS, then return its name from the companion attribute. For example, return warning from Amount_CssClass to use the Bootstrap warning class, or return the name of a class defined for your application.
Do not include the _Style or _CssClass helper attribute as a visible data column unless you intend to display its text. Its purpose is to provide presentation information for the column with the matching base name.
Client-specific styling
The companion-attribute convention identifies the cell to style. The style content depends on the client:
- For Bootstrap, Angular, and MVC rendering, use CSS declarations with
_Styleor CSS class names with_CssClass. See HowTos:Styling and CSS for Bootstrap, Angular and MVC. - For MDriven Turnkey styling, use the Turnkey CSS and modifier-class conventions where appropriate. See Documentation:Turnkey Styling, Documentation:MDriven Stylesheet, and Documentation:CSS BEM.
- For WPF-specific XAML styles, use a ViewModel column's StyleRef and the XAML resource naming conventions. See Documentation:Styling WPF Applications and ViewModels.