Alternate colors

Just assign different colors to odd/even rows with CSS -

.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}

<style> .aw-alternate-even {background: #fff;} .aw-alternate-odd {background: #eee;} </style> <script> var obj = new AW.UI.Grid; obj.setCellText("cell"); obj.setHeaderText("header"); obj.setColumnCount(10); obj.setRowCount(10); document.write(obj); </script>

It is possible combining column and row colors -

#myGrid .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd {background: #eee;}

#myGrid .aw-alternate-even .aw-column-1 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-1 {background: #ddd;}

<style> /* Alternate row colors */ #myGrid .aw-alternate-even {background: #fff;} #myGrid .aw-alternate-odd {background: #eee;} #myGrid .aw-alternate-even .aw-column-1 {background: #eee;} #myGrid .aw-alternate-odd .aw-column-1 {background: #ddd;} /* Selected cells */ #myGrid .aw-grid-row .aw-cells-selected {background: #316ac5;} </style> <script> var obj = new AW.UI.Grid; obj.setId("myGrid"); obj.setCellText("cell"); obj.setHeaderText("header"); obj.setColumnCount(10); obj.setRowCount(10); document.write(obj); </script>

You can also change how 'odd'/'even' values are calculated, for example, coloring rows in groups of 3 (triplets) -

function triplets(){
    return this.getRowProperty("position") % 6 < 3 ? "even" : "odd";
}

obj.getRowTemplate().setClass("alternate", triplets);

<style> #myGrid .aw-alternate-even {background: #fff;} #myGrid .aw-alternate-odd {background: #eee;} </style> <script> var obj = new AW.UI.Grid; obj.setId("myGrid"); obj.setCellText("cell"); obj.setHeaderText("header"); obj.setColumnCount(10); obj.setRowCount(10); function triplets(){ return this.getRowProperty("position") % 6 < 3 ? "even" : "odd"; } obj.getRowTemplate().setClass("alternate", triplets); document.write(obj); </script>