Change row color of Advanced Datagrid Controls in Flex

Question

I am using Flash Builder 4.6 . Create an AdvancedDataGrid in flex Application. I want to change the rowColor of 5th row of AdvancedDataGrid Control.

Here is my Code.

<?xml version="1.0"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
           xmlns:mx="library://ns.adobe.com/flex/mx"  
           xmlns:s="library://ns.adobe.com/flex/spark"> 
<fx:Script> 
    <![CDATA[ 
        import mx.collections.ArrayCollection; 

        [Bindable] 
        private var dpADG:ArrayCollection = new ArrayCollection([ 
            {Row:1, Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99}, 
            {Row:2, Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}, 
            {Row:3, Artist:'Saner', Album:'A Child Once', Price:11.99}, 
            {Row:4, Artist:'Saner', Album:'Helium Wings', Price:12.99}, 
            {Row:5, Artist:'The Doors', Album:'The Doors', Price:10.99}, 
            {Row:6, Artist:'The Doors', Album:'Morrison Hotel', Price:12.99}, 
            {Row:7, Artist:'Grateful Dead', Album:'American Beauty', Price:11.99}, 
            {Row:8, Artist:'Grateful Dead', Album:'In the Dark', Price:11.99}, 
            {Row:9, Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99}, 
            {Row:10, Artist:'The Doors', Album:'Strange Days', Price:12.99}, 
            {Row:11, Artist:'The Doors', Album:'The Best of the Doors', Price:10.99} 
        ]);                    
    ]]> 
</fx:Script> 
<mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{dpADG}" editable="true"
                     selectionMode="none" sortExpertMode="true"> 
    <mx:columns> 
        <mx:AdvancedDataGridColumn dataField="Row" />
        <mx:AdvancedDataGridColumn dataField="Artist" /> 
        <mx:AdvancedDataGridColumn dataField="Album" /> 
        <mx:AdvancedDataGridColumn dataField="Price" /> 
    </mx:columns> 
</mx:AdvancedDataGrid>         
</s:Application>

Answer 1

I haven't tried using the AdvancedDataGrid but when I have tried setting the row color of my DataGrid . I have done this by creating a custom DataGrid (mxml) then having the following methods:

override protected function drawRowBackground(s:Sprite, rowIndex:int,
                    y:Number, height:Number, color:uint, dataIndex:int):void
{
    if( this.rowColorFunction != null )
    {
        if( dataIndex < (this.dataProvider as ArrayCollection).length )
        {
            var item:Object = (this.dataProvider as ArrayCollection).getItemAt(dataIndex);
            color = this.rowColorFunction.call(this, item, dataIndex, color);
        }
    }

    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}


public function set rowColorFunction(f:Function):void
{
    this._rowColorFunction = f;
}

public function get rowColorFunction():Function
{
    return this._rowColorFunction;
}

Example:

myGrid.rowColorFunction = function(item:Object, dataIndex:int, color:uint):uint
{
    //conditions then return your color here
}