Alternating Row Color for Lists, Datagrids, etc

1

Here’s a quick and dirty way to do Alternating Row Colors in components such as Lists and Datagrids:

  1. Create an Actionscript file (*.as) and name it Alternating RowColors

  2. Add the following code to that Actionscript file:

package 
{
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;

    public class AlternatingRowColors extends CellRenderer implements ICellRenderer 
    {

        public function AlternatingRowColors():void 
        {
            super();
        }

        public static function getStyleDefinition():Object 
        {
            return CellRenderer.getStyleDefinition();
        }

        override protected function drawBackground():void 
        {
            if (_listData.index % 2 == 0)
                this.setStyle("upSkin", MySkin1);
            else
                this.setStyle("upSkin", MySkin2);
            
            super.drawBackground();
        }
    }
}

Note
MySkin1 and MySkin2 are movies in your fla library that will act as alternating row backgrounds. What I did in my project is make skin1 a have a light gray rectangle and skin2 have a dark gray rectangle. These rectangle shapes have a dimension of 150 X 22 at position 0, 0. You can of course make your background whatever you wish in your skins.

  1. Set the cell Renderer
    MyDataGrid.setStyle(“cellRenderer”, AlternatingRowColors);