Setting background color for datagrid row in Adobe Flex

Question

I need to programmatically change the background color for a single row in a datagrid in Flex. I\'ve scoured the Net and found reference to \"dg.setPropertiesAt,\" which is

Answer 1

Use this with spark.DataGrid

DataGridRowBackground.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo"
    implements="spark.components.gridClasses.IGridVisualElement"
    backgroundColor="{data.color}" background="true">

    <fx:Script>
        <![CDATA[

    import spark.components.Grid;

    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
    {
        if (!grid.dataProvider || rowIndex >= grid.dataProvider.length)
            data = null;
        else
            data = grid.dataProvider.getItemAt(rowIndex);
    }

        ]]>
    </fx:Script>
</s:DefaultGridItemRenderer>

In your app code:

<s:DataGrid>
    <s:rowBackground>
        <fx:Component><my:DataGridRowBackground /></fx:Component>
    </s:rowBackground>
</s:DataGrid>

The key element is IGridVisualElement interface which lets you bind to your dataProvider. This interface is called by GridLayout. See: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/spark/src/spark/components/gridClasses/GridLayout.as. You can use any IVisualElement as a background renderer, but with s:DefaultGridItemRenderer you have some functionality out of the box.

Hope this helps

Answer 2

I managed it by extending the DataGrid class and creating my own method, like this:

public function paintRow(rowNumber:Number,color:uint):void{
var rowBGs:Sprite=Sprite(listContent.getChildByName("rowBGs"));
drawRowBackground(rowBGs,rowNumber,listContent.rowInfo[rowNumber].y,listContent.rowInfo[rowNumber].height,color,null);
}

This was inspired by the drawRowBackgrounds method of the datagrid class.

Hope it helps.

Answer 3

dg.setPropertiesAt(3, {backgroundColor:0xFF0000});

Where dg is your datagrid and the number 3 is the row color of your grid.

Answer 4

I was wondering the same thing just a couple of days ago. If you have the Pro version of Flex, its AdvancedDataGrid has the built-in "styleFunction" property to handle this. If you've only got the regular DataGrid handy, this might help:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12548

A comment there links to documentation of styleFunction:

http://livedocs.adobe.com/flex/3/langref/mx/controls/advancedDataGridClasses/AdvancedDataGridBase.html#styleFunction

Beyond that, Stiggler's suggestion for using an itemRenderer is your other recourse.

Answer 5

You'll have to use an itemRenderer in order to accomplish this. See the following examples for more information:

http://butterfliesandbugs.wordpress.com/2007/07/11/using-an-itemrenderer-to-change-the-background-of-a-datagrid-cell/

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=61&productId=2