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
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;
}
}
}
