Yesterday I need a Flex cell renderer that would change the background color based on the value of the cell (for example, green if a positive number and red if negative). Unfortunately, background color is not a style, that would have been the simplest option.
The solution is to use ActionScript drawing APIs, and the following code was given to me by Flex Evangelist Christophe Coenraets. I am posting it here in case anyone else needs it, and so that I’ll have it around when I need it next.
First the renderer:
package {
import mx.controls.Label;
import mx.controls.dataGridClasses.*;
import mx.controls.DataGrid;
import flash.display.Graphics;
public class BackgroundColorRenderer extends Label
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
if (data.balance >= 0)
{
g.beginFill(0x009900);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
else
{
g.beginFill(0xFF0000);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}
}
}
And here is an example of the renderer being used:
Creating A Background Color Renderer
5 responses to “Creating A Background Color Renderer”
-
This is great when you want to change the background color of the specific cell, but what if instead you wish to set it for the entire row? In the renderer, one can access the row in question via this.listData.rowIndex, but I’m not sure where to go from there. Any ideas?
-
backgroundColor is not, for some strange reason, available as a style, but it is as a property.
If you look in the inherited properties of the dataGridItemRenderer you will see it.
just do
background=true;
backgroundColor=0xFF0000;
inside your renderer.
Cheers. -
Hey,
Cool Site…I have learned a bunkch of stuff here and from a few other bloggers. I am not really sure where to ask this question since resources are kind of limited on Flex. So I thought I’d ask you.
I am working with the Dashboard Demo app from the Adobe Demo Apps website ("http://www.adobe.com/devnet/flex/?tab:samples=1"). I am trying to add in an extra column with colored Alarms (basically the background color for an individual cell changes depending on the value <positive or negative>.
I am using a custom renderer that I found here ("http://www.forta.com/blog/index.cfm/2006/6/8/Creating-A-Background-Color-Renderer"😉
When I run the code for the custom renderer in a sandbox all is well. But when I add the code to the Dashboard App I run into errors.
I am comming from php/javascipt and before the .net/ASP/VB world so I am having trouble debugging the errors.
Any ideas you have would be appreciated…. -
I have solved the issue. Thanks to your site I got going on the right track. I have another issue and I thought you might be able to help.
Much like the DataGrid Background Renderer I also need a TabNavigator header colors. I have searched for this but there does not seem to be any way change these properties for each header.
You can only change based on Selected on not Selected. I would like to access each and change based on Bus Logic. Any Ideas… -
I did the same but different, i think mine is easy
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.graphics.IFill;
import mx.graphics.SolidColor;
[Bindable] public var array :ArrayCollection;
public function init() : void {
array = new ArrayCollection();
array.addItem({col1:1, col2:01});
array.addItem({col1:2, col2:11});
array.addItem({col1:3, col2:21});
array.addItem({col1:4, col2:31});
array.addItem({col1:5, col2:41});
array.addItem({col1:6, col2:51});
array.addItem({col1:7, col2:61});
array.addItem({col1:8, col2:71});
array.addItem({col1:9, col2:81});
array.addItem({col1:10, col2:91});
}
]]>
</mx:Script>
<mx:DataGrid x="285" y="218" height="445" dataProvider="{array}">
<mx:columns>
<mx:DataGridColumn dataField="col1" headerText="Column 1" >
</mx:DataGridColumn>
<mx:DataGridColumn dataField="col2" headerText="Column 2">
<mx:itemRenderer>
<mx:Component id="rendererCompontent">
<mx:VBox creationComplete="init(event)">
<mx:Script>
<![CDATA[
public function init(event:Event):void{
var score :int = data.col2;
if(score<60) event.target.setStyle("backgroundColor", 0x000000); // Black Color
else if(score>59 && score<70) event.target.setStyle("backgroundColor", 0xFF0000); // Red Color
else if(score>69 && score<80) event.target.setStyle("backgroundColor", 0xFFFF00); // Yellow Color
else if(score>79 && score<90) event.target.setStyle("backgroundColor", 0x0000FF); // Blue Color
else if(score>90) event.target.setStyle("backgroundColor", 0x00FF00); // Green Color
}
]]>
</mx:Script>
<mx:Label text="{data.col2}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Leave a Reply