Conditional Image from DataGrid Value

Question

Hi all,
Using a custom itemRenderer within my DataGrid, I've been
able to add an image. (see code below) Now my problem is this...
How does one go about setting the source of the image based on a
value within the corresponding data. In my case, the value of the
attribute "status" may be either "OK" or "Unreachable", and I want
to control the source of the image based on which one is set. How
would one do such a thing?
<mx:DataGridColumn headerText="" dataField="status"
width="30" resizable="false">
<mx:itemRenderer >
<mx:Component>
<mx:HBox>
<mx:Spacer/>
<mx:Image source="image/ok.png" />
<mx:Spacer/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Answer 1

You can write a custom itemRenderer in MXML that overrides
the set data function. Your renderer would look something like
this:
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
if(value != null)
super.data = value;
if (value.status == "OK")
img.source = "ok,jpg";
else
img.source = "unreachable.png";
]]>
</mx:Script>
<mx:Spacer/>
<mx:Image id="img" source="image/ok.png" />
<mx:Spacer/>
</mx:HBox>
Then, you would just have:
<mx:DataGridColumn headerText="" dataField="status"
width="30" resizable="false" itemRenderer="myCustomRenderer" />
I hope this helps.
Joan Lafferty
Flex SDK QA