How set background of row dynamic using flex?

Look my source:

• Template:

[code]

<mx:Script source="ListStatus.as" />

<!-- Template -->
<mx:DataGrid id="grid" width="100%" height="100%" doubleClick="editRecord();">
    <mx:columns  >
        <mx:DataGridColumn width="30" resizable="false" draggable="false">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:LinkButton icon="@Embed('assets/img/delete.png')" click="outerDocument.deleteRecord(event);" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Nome" dataField="name" />
        <mx:DataGridColumn headerText="Nome de exibição" dataField="displayName" />
        <mx:DataGridColumn headerText="Cor" dataField="color" />            
    </mx:columns>
</mx:DataGrid>

[/code]

• ActionScript:

[code] import fuel.Ajax; import fuel.IModule; import fuel.window.Window;

import mx.controls.Alert; import mx.events.ModuleEvent; import mx.modules.ModuleLoader;

public var win:Window;

/** * Constructor * * Get data from turbo gears controller */ public function init():void {

showLoading(); Ajax.requestJSON('/access/status/getList', {}, function (obj:Object):void { hideLoading(); grid.dataProvider = obj.results; }); }

/** * Call form to edit record */ public function editRecord():voi开发者_开发知识库d {

try {
    grid.selectedItem.id;                   
} catch(e:Error) {
    Alert.show("Você deve selecionar um registro válido", "Atenção");
    return;
}

var module:ModuleLoader = new ModuleLoader();
module.url = "access/CreateStatus.swf";
module.applicationDomain = ApplicationDomain.currentDomain;
module.addEventListener( ModuleEvent.READY, onModuleReady );

var title_bar:String = "Edição de Status (" + grid.selectedItem.id + ")";

if( this.window ){
    win = this.window.openChild(title_bar, module, 410, 250);
} else {
    win = (parentApplication as Admin).winManager.openWindow(title_bar, module, 410, 250);
}

}

/** * Call controller to delete record */ private function actionDeleteRecord( resp:Object ):void { if( resp.detail == Alert.YES ){ grid.enabled = false;

    Ajax.requestJSON( "/access/status/delete", { 'id' : grid.selectedItem.id }, function( obj:Object ):void {
        if (obj.error == false) {
            Alert.show("Registro deletado com sucesso", "Confirmação");
        } else {
            Alert.show(obj.msg, "Erro");
        }

        init();             
    });

    grid.enabled = true;
}

}

/** * Call request to delete record */ public function deleteRecord( event : Event ):void { Alert.show("Esta operação NÃO poderá ser desfeita.\nDeseja mesmo remover o status \""+grid.selectedItem.displayName+"\"?", "Confirmação", Alert.YES | Alert.NO, this, actionDeleteRecord ); }

public function onModuleReady( event:ModuleEvent ):void {

var loader:ModuleLoader = event.target as ModuleLoader;

var m:* = loader.child as IModule;
if( m ) m.addEventListener( Event.RENDER, function runModule(e:Event):void{
    m.setId(grid.selectedItem.id);
    m.window = win;                 
    m.removeEventListener( Event.RENDER, runModule );
});

}; [/code]

I need set background of row using the value of color how exists in dataProvider.

Sorry for my ignorance, this is my first project using flex.

Thank's!

The solution is to make a class that extends DataGrid and override the drawRowBackground method, which is responsible for drawing a colored rectangle behind the row items.

The drawRowBackground method is passed a default color, as well as the index of your current data item, so you can retrieve the current item, grab a custom color property from it, and pass that color into the super.drawRowBackground() call.

override protected function drawRowBackground(s:Sprite, rowIndex:int, 
                                                y:Number, height:Number,
                                                color:uint, dataIndex:int):void 
{
    if (dataIndex < dataProvider.length && dataProvider[dataIndex])
    {
        color = dataProvider[dataIndex].color;
    }
    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}