CSS-only method for DataGrid cell formatting based on cell contents

[franz]

It can be helpful to display datagrid cell data in specific formats, depending on the cell contents when you, for example, have a status column with a distinct set of statuses in a datagrid, like this:

Here is how you can achieve this:

1. Open the Columns editor in the properties panel of an existing Datagrid
2. Select the column you want to format in the list on the left
3. Set the Cell Display property of the column to “Elipsis” and hit save
4. Open the StyleSheet in the Application Explorer (if you don’t see a StyleSheet option in the Application Explorer tree, you need to select your application and check “Enable Style Sheet” it in properties)
   
   
5. Add the CSS below into the StyleSheet for each status you want to format (example is for the status Unpaid)

td > span.grid-cell-display-ellipsis[title="Unpaid"] {
   color:white;
   background-color:darkred;
}

Here is a screenshot of a more complete example: