Grid itemrenderer messup while scrolling - actionscript-3

Question

I have one list which have Datagrid as itemRenderer like:
<s:List id="cList" itemRenderer="views.renderers.DGridItemRenderer"
dataProvider="{sList}" useVirtualLayout="false"/>
And ItemRenderer Datagrid is like:
<s:DataGrid id="cDataGrid" width="100%" height="100%" editable="true" >
<s:columns>
<mx:ArrayList>
<mx:source>
<s:GridColumn width="40" headerText="Name" dataField="name" editable="false"/>
<s:GridColumn width="40" headerText="class" dataField="class" editable="false" />
<s:GridColumn width="60" headerText="age" dataField="age" editable="true"/>
<s:GridColumn width="60" headerText="SLight" editable="false" itemRenderer="views.renderers.SLColorStatusRenderer"/>
</mx:source>
</mx:ArrayList>
</s:columns>
</s:DataGrid>
Now Slight gridColumn have following GridItemRenderer which have icon :
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" verticalCenter="0" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
if(data.age < 18 && data.age > 0)
{
imgStatus.source = ImageProvider.redIcon;
}
else if(data.age >= 18)
{
imgStatus.source = ImageProvider.greenIcon;
}
]]>
</fx:Script>
<s:Image id="imgStatus" width="21" height="21" buttonMode="true" horizontalCenter="0" verticalCenter="0" />
</s:GridItemRenderer>
SLight column contained Red/Green icon depend on data of age. Age value should be editable in datagrid.
If Age lessthan 18 then red else green icon.
Now, My issue is that When i scroll datagid, icon will mess-up. Icon will display in any record wheather there is age or not.
When load first time all icon looks good. But when i scroll then only mess-up icon and chnage their position.
I use useVirtualLayout="false" for list and clipAndEnableScrolling="true" for itemrenderer but still i can't solve it.
I found lot but didn't get any proper solution.
Edit:
If age less then 18 then red, Else if age greater 18 then green. Other wise if not age defined then blank.
My issue is when i scroll then blank row will also display icon. and red icon row will change to green and green to red randomly. All messup.
First it shows like following. (it's correct):
After when i scroll datagrid it change to following. (it's in-correct)

Answer 1

Your problem is that you're not handling itemrenderer recycling properly, given that age is not always set. You'd be okay if your data always had an age value. As it is, your code doesn't have a way to blank out the imgStatus object -- it just leaves whatever icon was already there if age is null or -1.
Change your code to the following:
if(data.age < 18 && data.age > 0)
{
imgStatus.source = ImageProvider.redIcon;
imgStatus.visible = true;
}
else if(data.age >= 18)
{
imgStatus.source = ImageProvider.greenIcon;
imgStatus.visible = true;
}
else
{
//You could use the following line instead if you have a "clear icon" defined.
//imgStatus.source = ImageProvider.clearIcon;
imgStatus.visible = false;
}