Alternate background color of each row

It possible of alternate each row backgroung color?
November 12,
I will try to add this to the next release
Alex (ActiveWidgets)
November 12,

I don't know if this is the right way to do this, but here is how I alternated the row colors.

function myColor(){
var value = this.getProperty("item/index");
return (value & 1) ? "#ddd" : "white";

obj.getTemplate("row", 0).setStyle("background-color", myColor);

John M
November 27,
Yes, John - its very close, except that you need another property. item/index refers to the position in the data source and not on the display, so the colors may go out of order as soon as you sort the data. We need something like item/order instead - its not there yet, but I'm planning to add it.

Alex (ActiveWidgets)
Alex (ActiveWidgets)
November 27,
Thanks for pointing that out, I hadn't tried sorting it after I made that change. When will it be available?
John M
November 27,
Has this feature been added yet? I am very interested in using this if this feature is there.
May 18,
I found the code:
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#90EE90" : "white";

var row = new Active.Templates.Row;
row.setStyle("background", alternate);
obj.setTemplate("row", row);
May 19,
I like these examples and they work great. Here's the deal. I've got a designer on my butt to show the grid with alternating row colors BUT not show the alternating colors on the last column that is really not a column.

Know what I mean?

The last column that always appears, but is not actually a column. We gotta make that a straight color. I can't seem to find any references about how to control that portion of the grid.

Any Ideas?
April 8,
You have something wrong in the number of columns you have defined. If you declare the correct number of columns then there are no 'extra' columns. It sounds like you have the classic 'off by one' problem that besets most developers. None of my grids have extra columns. Double check your column count and subtract one from it if you have to in order to get rid of the 'extra' column.
Jim Hunter
May 4,

I have just implemented your grid into a site, I have found to it very eay to use. I have found it a little hard to customise the look, but at 4am a little understandable.

My question is, is it possible, and if so how? to implement alternate row via a css and id or class.
Leon Chaffey
June 10,
Cheers Keith, your code works a dream!

June 10,
Sorry my ingles

It possible modify the row backgroung color depending of the value of one determined column ?

Brasil - Evandro
June 11,

yes its possible. Check out the code:
sim eh possivel, coloque o codigo na sua pagina:

function myColor()
var value = this.getItemProperty("value");
return value > 0 ? "blue" : "red";

for it column you do:
e para cada coluna voce define essa propriedade:

obj.getColumnTemplate(1).setStyle("color", myColor);
Igor Feghali
June 17,
Thanks Igor, functioned correctly.
Brasil - Evandro
June 28,
how to change special row style? not the whole row template
September 15,
this not working for me. please help any one?
October 5,

This topic is archived.

See also:

Back to support forum