HowToCustomizeGridRowColors

How to customize grid colors

You can customize the background color of grid rows or columns in the List controller in several ways, depending on the complexity of your needs.

Fixed color in a column

The following example define yellow as background color for email addresses column:

EMailAddress:
  Color: yellow

A more flexible way is using the CSS node:

EMailAddress:
  CSS: background-color: yellow;

in this case the result of the two pieces of code is the same, but in the CSS node you have the possibility to complity customize the grid (for example you can choose a color for text)

Colors based on custom conditions

The easiest way is to define a Colors subnode at the model field or view field level (view field level, as usual, has precedence). The following example defines yellow as a color for rows in which the EMailAddress field matches the given regular expression, and red for all other rows.

EMailAddress:
  Colors:
    FFFF00: ^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$
    FF0000: .*

If the ViewTable (or underlying Model) has more than one field with a Colors subnode, then the first one is used, unless you also specify RowColorField at the controller level:

Controller:
  RowColorField: EMailAddress

The above settings allow you to colorize rows based on pattern matching of single field values. If your row-coloring conditions are more complex (such as based on numeric ranges, or multi-field conditions) and you don't mind writing a bit of javascript code, then you can use the RowClassProvider property:

Controller:
  RowClassProvider: |
    function (record, index) {
      var age = record.get('Age');
      if (age >= 15) {
        return 'important-row';
      } else if (age >= 12) {
        return 'semi-important-row';
      } else
        return '';
    }

In the example above, an anonymous javascript function is defined with a given prototype and return value. The function gets the data record and the row index as arguments (it can have more - see the ExtJS documentation for GridView.getRowClass for more details) and should return the name of a CSS class that will be applied to the entire row. The example applies a certain class for records with Age >= 15 and a different class for other record. The CSS classes can be defined statically in application.css, for example:

.important-row
{
  background-color: #FFB2B2;
}

.semi-important-row
{
  background-color: #FFEB99;
}

or they can be added dynamically by calling Kitto's predefined addStyleRule routine. Here's the revised example:

Controller:
  RowClassProvider: |
    function (record, index) {
      var age = record.get('Age');
      if (age >= 15) {
        addStyleRule('.important-row { background-color: #FFB2B2; }');
        return 'important-row';
      } else if (age >= 12) {
        addStyleRule('.semi-important-row { background-color: #FFEB99; ');
        return 'semi-important-row';
      } else
        return '';
    }

Generally you want to use static CSS classes, unless you need to build their contents based on data values.

---

As a future enhancement, Kitto will allow you to express your row-coloring condition in Delphi code, executed on the server side during data-retrieving Ajax calls.