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:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="400" width="600">
<mx:Script>
<![CDATA[
[Bindable]
public var myDP:Array =
[
{name:"Andy", balance:-400},
{name:"Bill", balance:100},
{name:"Jim", balance:350},
{name:"John", balance:500},
{name:"Steve", balance:-600},
]
]]>
</mx:Script>
<mx:DataGrid id="myDG" dataProvider="{myDP}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="BackgroundColorRenderer" />
<mx:DataGridColumn dataField="balance" headerText="Balance" itemRenderer="BackgroundColorRenderer" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
If you look in the inherited properties of the dataGridItemRenderer you will see it.
just do
background=true;
backgroundColor=0xFF0000;
inside your renderer.
Cheers.
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&qu...;). 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/Creat...;)
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....
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...