Gridx in XPages – 13: Customizing Cell Content

So far, we’ve only looked at displaying text from the REST service in the grid. However, you can also customize the content dynamically based on a value. In this post, I’ll show how to do use the decorator property to modify cell content.

Gridx Series

Gridx in XPages — Entire Series

The decorator Property

The decorator property of a grid column is like the formatter function for a regular Dojo data grid.

It calls a function that will process column data and return whatever you want to display in the cell.

An Example

In this hideous example, I added a column to the grid that reads the State value from the data store and writes out a span with a background color based on the state.

Here is the column structure for this grid:

  var columns = [
    {id: 'first', field: 'firstname', name: 'First', width: '70px'},
    {id: 'last', field: 'lastname', name: 'Last'},
    {id: 'state', field: 'state', name: 'State', width: '40px'},
    {id: 'stateColor', field: 'state', name: '', width: '20px',
      decorator:function(value) {
        var color;
        switch (value) {
        case 'IL':
          color = 'red';
          break;
        case 'FL':
          color = 'blue';
          break;
        case 'GA':
          color = 'yellow';
          break;
        default:
          color = 'gray';
          break;
        }

        return '<span style="background-color:' + color + ';">' + value + '</span>';
      }
    }
  ];

The decorator property of the stateColor column writes out the cell data for that column. It automatically receives an argument with the raw data for the state.

In this example, it uses a switch statement to check the value of the state and set a color variable.

Line 23 returns a span tag with the background color defined. It also displays the state text (although it is not necessary).

This is a simple example, but the possibilities are endless. You can use this to compute images to display in a cell based on a status. You could put any other HTML content — including a link or a button, etc.