How to set alternate row color in flex datagrid?

Question

What is the method to set different colors for alternate rows in a flex datagrid? So that two adjacent rows are identified easily?

Solution 1

Use alternatingItemColors style. You can specify as many colors as you want in the array.

<mx:DataGrid id="dg" alternatingItemColors="[#449933, #994433]"
    dataProvider="{[{d:'ASD', c:'$#'},{d:'WER', c:'^@'},{d:'VCB', c:'*!'}]}">
    <mx:columns>
        <mx:DataGridColumn dataField="d"/>
        <mx:DataGridColumn dataField="c"/>
    </mx:columns>
</mx:DataGrid>

This style takes effect only if no backgroundColor is specified.

Solution 2

I used itemRenderer into DataGridColumn

<mx:DataGrid>
   <mx:columns>
      <mx:DataGridColumn dataField="A" itemRenderer="com.shels.table.MarkObject"/>
      <mx:DataGridColumn dataField="B" />
   </mx:columns>
</mx:DataGrid>

package com.shels.table {

import flash.display.Graphics;
import flash.geom.Matrix;

import mx.controls.Label;
import mx.controls.dataGridClasses.*;

public class MarkObject extends Label {

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var g:Graphics = graphics;
        g.clear();

        var dField:String = DataGridListData(listData).dataField;
        var f:int = DataGridListData(listData).columnIndex;

        var c:int = 0xFFFFFF; 

        // c = parseInt( data[ "color"]);
        // You can to use field values from record.

        g.beginFill( c);
        g.drawRect(0, 0, unscaledWidth, unscaledHeight);

        g.endFill();
    }
}

Solution 3

An alternative method is to use the DataItemBound(Object, DataGridItemEventArgs) event handler.

The Object in this event signature is the DataGrid control, so recast it and use .DataGrid.Items.Count modulo 2 to obtain a reference for when .DataGridItemEventArgs.Itemis an alternate row. I then created a css style for the alternate and changed .DataGridItemEventArgs.Item.CssClass to that newly created style.

The advantage with this method is that other row color manipulation can be done after this for highlighting; the alternateItemColor solution from above will always be the last css change before rendering, potentially overwriting any other highlighting.