Home

Change the background color of a FLEX DataGrid row,How to change datagrid's row background color

Submitted by softking on Fri, 02/06/2009 - 01:26

Some times you want to change the background color of a row inside a FLEX DataGrid. You usually want to do so in order to mark that row as an error or to make it out stand from the other rows.
For unknown reason this is not a simple task as it sounds.

See complete source in the attachments section

See working example HERE

In AS 2.0 it was possible to use :

DataGrid.setPropertiesAt(<row number>, {backgroundColor:0xFF0000});

But this code does not work any more in AS 3

My example here is mostly based on some code that i saw here:
http://weblogs.macromedia.com/pent/archives/2006/10/datagrid_tip_ro.html

The idea is to create our own DataGrid class that inherits the function "drawRowBackground" and changes the background color for each line/row

So i created 2 examples that use 2 different variants of this solution:

Solution number 1 assumes that each dataGrid item has a property called "color"

This is the code for that solution:

package com.softologia
{
import flash.display.Sprite;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class DataGridEx2 extends DataGrid
{
public function DataGridEx2()
{
super();
}

    override protected function drawRowBackground(s:Sprite, rowIndex:int,
      y:Number, height:Number,
                                                  color:uint, dataIndex:int):void
        {
        var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
        if( item.hasOwnProperty("color")){
        color = item.color; 
        }
       
        super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
    }
}
}

In the above code we can see that the function "drawRowBackground" is overridden and for each item we check if it has a property called "color" , if it does we use that color for that row

Solution number 2:
In this solution we also create a class that inherits from DataGrid, but here we do not assume that each data item has a property called color.
Instead we create a CallBack function that will be used for each item to determine that row color

see code below:

package com.softologia
{
import flash.display.Sprite;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class DataGridEx1 extends DataGrid
{
public var rowBackgroundColorFunction:Function;
public function DataGridEx1()
{
super();
}
override protected function drawRowBackground(s:Sprite, rowIndex:int,
      y:Number, height:Number,
                                                  color:uint, dataIndex:int):void
        {
        if( rowBackgroundColorFunction!=null ){
        var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
        color = rowBackgroundColorFunction(item);
        }
            super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
    }
}
}

In the code above we have a member called "rowBackgroundColorFunction", when we use this DataGridEx1 from the MXML file we can define a function that will be called for each line

Example function:

private function getRowBackgroundColor(item:Object):uint{
if( item.color!=null ){
return item.color;
}
return 0xFFCCFF;

}

Below we can see usage example of these 2 solutions:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle"
width="100%"
height="100%"
xmlns:softologia="com.softologia.*">
<mx:Array id="gridData1">
        <mx:Object color="0xff3377" label="item1 with color"/>
        <mx:Object color="0xff1122" label="item2 with color"/>
        <mx:Object color="0xff3322" label="item3 with color"/>
        <mx:Object color="0xff1122" label="item4 with color"/>
        <mx:Object label="item5 no color"/>
        <mx:Object label="item6 no color"/>
        <mx:Object label="item7 no color"/>
        <mx:Object label="item8 no color"/>       
</mx:Array>
<mx:Array id="gridData2">
        <mx:Object color="0xff3377" label="item1 with color"/>
        <mx:Object color="0xff1122" label="item2 with color"/>
        <mx:Object color="0xff3322" label="item3 with color"/>
        <mx:Object color="0xff1122" label="item4 with color"/>
        <mx:Object label="item5 no color"/>
        <mx:Object label="item6 no color"/>
        <mx:Object label="item7 no color"/>
        <mx:Object label="item8 no color"/>       
</mx:Array>

<mx:Script>
<![CDATA[

private function getRowBackgroundColor(item:Object):uint{
if( item.color!=null ){
return item.color;
}
return 0xFFCCFF;

}
]]>
</mx:Script>

<softologia:DataGridEx1 dataProvider="{gridData1}" width="300"
rowBackgroundColorFunction="getRowBackgroundColor">
<softologia:columns>
<mx:DataGridColumn dataField="label"/>
</softologia:columns>
</softologia:DataGridEx1>

<mx:Spacer height="20"/>

<softologia:DataGridEx2 dataProvider="{gridData2}" width="300">
<softologia:columns>
<mx:DataGridColumn dataField="label"/>
</softologia:columns>
</softologia:DataGridEx2>

</mx:Application>

See complete source in the attachments section

»