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.