HowToCustomizeGridRowColors

How to customize grid row colors based on custom condition s###

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

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 color rows based on pattern matching of single field values. If your row-coloring conditions are more complex (such as coloring 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.