Search Flex Samples

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.

Google brought me two interesting links:

1. How opaqueBackground can be used to color the background of a label itemRenderer
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.

2. How do you change the background cell color in a DataGrid?
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.

Sample Application

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


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
layout="vertical" verticalAlign="middle" xmlns:tmp="component.dashboard.*"

private function init() : void {
<mx:XML id="itemsXML">
<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" />

.centered {
text-align: center;

<mx:DataGrid id="myGrid" dataProvider="{itemsXML.item}" editable="true">
<mx:DataGridColumn dataField="@name" headerText="Name"

<mx:DataGridColumn dataField="@state" headerText="Price"
textAlign="right" headerStyleName="centered">


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.*;

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()) {
} else {
} else {

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.*;

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;


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples