Conditionally style table columns based on values.

Question

There are a few columns where numbers are manually entered in.  Is it possible to turn a cell red if the number isn’t within a certain range? There are about 5 or 6 cells we care about.

Answer 1

Two features were added in dbFront 1.2.0.0343 that let you deal with this scenario.

As of dbFront 1.2.0.0343, you can now:

1. Assign multiple CSS classes to a table row.
2. Assign a CSS class to the table-grid columns.

Using a View or Calculated column you can return a list of CSS classes for that table row that list the items you want to alert the user about.

For example, if the temperature is too high you could return a class named "tempToHigh".

If the Temperature column is assigned a class named "tempField" then you can create a CSS style as follows to make the temperature column stand out.

tr.tempToHigh>td.tempField {
    color: red !important;    
    font-weight: bold !important;    
}

Important: Please ensure that you use the exact case for the CSS classnames in dbFront, the database column and the CSS files because CSS is case specific.

For more details on adding styles to the Table Grid see: Table Row Styling