Sample cookbook post

Using an itemRenderer for multiple columns

Problem

I want to use an itemRenderer for multiple columns that changes the background color of a cell depending on the data. Unfortunately, its not as simple as changing some style because the default renderer for a DataGrid cell does not have a backgroundColor. Therefore, to do this task, you have to create a custom itemRenderer where you draw your own background in the updateDisplayList function.

Solution

In the following example, I've created a simple DataGrid with two columns of X and Y values. If any of the values exceeds 100, the cell background will be red. I will use the same itemRenderer for both columns since the two columns behave the same.

Explanation

Here is my Actionscript itemRenderer:

package {

    import mx.controls.Label;
    import mx.controls.DataGrid;
    import mx.controls.dataGridClasses.*;
    import flash.display.Graphics;

    public class CustomBackgroundComp extends Label {

        override protected function     updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var g:Graphics = graphics;
            g.clear();
            var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);
            if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))
                return;
            if (data[DataGridListData(listData).dataField] > 100)
            {
                g.beginFill(0xFF0033);
                g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                g.endFill();
            }
        }
    }
}
        

To see the full example, download the zip file associated with this example.