How to color Datagrid cells/rows in flex 2

I have been looking for a easy and neat way to color a single cell or a complete row in flex 2. <strong>Google brought me two interesting links:</strong> <strong>1. How opaqueBackground can be used to color the background of a label itemRenderer</strong> The comment posted by Dallas at 11/10/06 8:01, shows a way of highlighting a cell. Very simple implementation - the only problem is that the background color won't react on mouseover after the opaqueBackground is set. <strong>2. How do you change the background cell color in a DataGrid?</strong> Shows how to implement a colored background that react upon mouseover and selection. The implementation extends a label and overrides the 'updateDisplayList' method to draw some graphics as the background. The last solution seems to be the one I preferred - because of the ability to see mouse effects applied to the cell. But still I liked the cleen implementation of the first one. I couldn't resist of bringing combined solution, where I extends a Label, but listens for a Event.RENDER events instead of overriding the updateDisplayList method.

Sourcecode Demonstrates how to use the renderer as a drop-in and inline itemRenderer.

<? xml version = "1.0" encoding = "utf-8" ?> < mx : Application xmlns : mx = "http://www.adobe.com/2006/mxml" layout = "vertical" verticalAlign = "middle" xmlns : tmp = "component.dashboard.*" creationComplete = "init()" > < mx : Script > private function init() : void { myGrid.setFocus(); } </ mx : Script > < mx : XML id = "itemsXML" > < items > < item name = "Item 1" state = "1" /> < item name = "Item 2" state = "0" /> < item name = "Item 3" state = "0" /> < item name = "Item 4" state = "1" /> < item name = "Item 5" state = "0" /> </ items > </ mx : XML > < mx : Style > .centered { text-align: center; } </ mx : Style > < mx : DataGrid id = "myGrid" dataProvider = "{itemsXML.item}" editable = "true" > < mx : columns > < mx : DataGridColumn dataField = "@name" headerText = "Name" headerStyleName = "centered" itemRenderer = "component.dashboard.TestItemRenderer" /> < mx : DataGridColumn dataField = "@state" headerText = "Price" textAlign = "right" headerStyleName = "centered" > < mx : itemRenderer > < mx : Component > < tmp : TestItemRenderer /> </ mx : Component > </ mx : itemRenderer > </ mx : DataGridColumn > </ mx : columns > </ mx : DataGrid > </ mx : Application >

CustomItemRenderer.as Following is a CustomItemRenderer that can be extended to apply logic to decide if a cell is to be styled.

package dk . jacobve { import mx . controls . Label ; import mx . controls . DataGrid ; import mx . controls . dataGridClasses .*; import mx . events . FlexEvent ; import flash . events . Event ; public class CustomItemRenderer extends Label { public function CustomItemRenderer { //listen for render events addEventListener ( Event . RENDER , renderListener ); } public function styleIt () : Boolean { return false ; } public function styleTrue () : void { } public function styleFalse () : void { } protected function renderListener ( event : Event ) : void { if ( listData != null ) { var grid : DataGrid = DataGrid ( DataGridListData ( listData ). owner ); if (! grid . isItemHighlighted ( data ) && grid . selectedItem != data ) { if ( styleIt ()) { styleTrue (); } else { styleFalse (); } } else { styleFalse (); } } } } }

CustomItemRenderer extension Shows an implementation using E4X on a xml data element to deside if the cell is to be colored red.

package dk . jacobve { import mx . controls . Label ; import mx . controls . DataGrid ; import mx . controls . dataGridClasses .*; import mx . events . FlexEvent ; import flash . events . Event ; public class TestItemRenderer extends CustomItemRenderer { public override function styleIt () : Boolean { return data . @state == "0" ; } public override function styleTrue () : void { this . opaqueBackground = 0x33CC33 ; } public override function styleFalse () : void { this . opaqueBackground = null ; } } }