Skip to content

Dynamic Grid Properties

Dwayne Jones edited this page May 8, 2017 · 7 revisions

It is possible to control grid properties programmatically, keying certain properties to values knowable only at run-time, for example the value of the cell.

This can be accomplished by either or two methods:

  1. Make a property "dynamic" or "smart" by overriding it with a property getter
  2. Temporarily reset property values in a getCell override

While either method can be made to work, which method you choose to use depends on the property and the set of cells to which it will be applied.

Property getters

Getters have the advantage that they can be naturally limited to specific columns or cells by creating them at setup time on the appropriate properties objects. This means that the getter itself does not need to make this determination at run time (painting) as opposed to getCell.

Here's an example that creates a checkerboard pattern using a backgroundColor property getter:

Object.defineProperty(grid.properties, 'backgroundColor', { get: function() {
    var cell = this.gridCell;
    return cell && (cell.x ^ cell.y) & 1 ? 'grey' : 'white';
}});

getCell override

grid.behavior.dataModel.getCell is called before each cell renderer. It is necessary to inspect the cell coordinates to determine whether or not to set a property. This means that your getCell override can fill up with conditional logic, becoming quite lengthy, an obvious performance killer.