Row Color

I have read many of the topics and found much information,but not what i needed. i like the feature of alternating row colors, but can only utilize 2 colors. i want something similar but want to maje it alternate every 4 or 5 rows. some reason i was getting an error using

var colors = ["#eee", "#ddd", "#ccc"];
    obj.defineDataProperty("color", function(i){return colors[i]});

    var row = new Active.Templates.Row;
    row.setStyle("background", function(){
    return this.getRowProperty("color");
                        });

    obj.setRowTemplate(row);

maybe i just dont see it. also is there a way to set 1 row to a different height then predefined height

//  set alternate higlighting
obj.alternateColors = ["#eee", "#ddd", "#ccc"]; 
obj.alternate = function(){ return obj.alternateColors[this.getProperty("row/order") % obj.alternateColors.length]; }
obj.getTemplate("row").setStyle("background", obj.alternate);

It is safer to use obj.alternateColors and obj.alternate than var alternateColors and function alternate (which may create problem or non-re-usable code, if you have more than one grid on the same page and want things differently)

Hope this helps ;-)

Suggested code will work like this with minimal modification.

colors[i%colors.length] will do the trick and avoid out-of-bound index

var colors = ["red", "blue", "green"]; 
obj.defineDataProperty("color", function(i){return colors[i%colors.length]}); 
var row = new Active.Templates.Row; 
row.setStyle("background", function(){ 
    return this.getItemProperty("color"); 
}); 
obj.setRowTemplate(row);

This should work fine.