:: Documentation >> Tutorial >> Grid >>

Using alternate colors for grid rows.

With a few steps you can enable alternate background colors on the grid.

The background color should be generated by the function depending on the row order in the grid.

var alternate = function(){
  return this.getProperty("row/order") % 2 ? "threedface" : "white";
}

Then you need to create a new row template.

var row = new Active.Templates.Row;

Assign a color function to the background color style.

row.setStyle("background", alternate);

An use this modified row template instead of standard one.

obj.setTemplate("row", row);

Complete example:

Back to Visual Style