DataGrid with Image column rendering problem

Question

Hi,
I'm having trouble in getting images displayed on a datagrid
column. If I scroll down and then scroll up the scrollbar, the
images are rendering fine. The source of the image is Bitmap which
is generated at run time. Any idea how to solve this problem? Any
help is greatly appreciated.
Thanks,
Jeesmon
My component code is pasted below
"Attach Code"
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" dataProvider="{cardDataProvider}">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import
org.eclipse.higgins.cardselector.filters.CustomDropShadowFilter;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import org.eclipse.higgins.cardselector.icard.Card;
[Bindable]
private var cardDataProvider:ArrayCollection;
private var _cards:Array;
public function get cards():Object {
return this._cards;
public function set cards(value:Object):void {
this._cards = value as Array;
if(this._cards != null && this._cards.length > 0)
buildDataProviderArray();
private function buildDataProviderArray():void {
var dataArray:ArrayCollection = new ArrayCollection();
for(var i:int = 0; i<this._cards.length; i++) {
var card:Card = this._cards
dataArray.addItem(card);
this.cardDataProvider = dataArray;
private function init():void {
this.styleName = "CardsBox";
this.width = 200;
this.rowHeight = 120;
this.headerHeight = 0;
this.liveScrolling = true;
this.filters = [new CustomDropShadowFilter(0x333322, 55,
2).getInstance()];
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn sortable="false" editable="false"
resizable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%" paddingLeft="5"
paddingRight="5" paddingTop="5" paddingBottom="0"
verticalGap="0">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function getBitmap(value:*) : DisplayObject
var result:DisplayObject;
var loader:Loader = Loader(Image(value).getChildAt(0));
if(loader.contentLoaderInfo.childAllowsParent)
if(loader.content is Bitmap)
var bitmap:Bitmap = Bitmap(loader.content);
result = new
Bitmap(bitmap.bitmapData,bitmap.pixelSnapping,bitmap.smoothing);
return result;
]]>
</mx:Script>
<mx:Image source="{getBitmap(data.getImage())}"
height="80" width="120" styleName="CardsBoxImage" />
<mx:Label text="{data.getName()}"
styleName="CardsBoxLabel" width="100%" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

Answer 1

I solved the issue by adding creationComplete event handler
for the image in the datagrid column
<mx:Image source="{data.getImage()}" height="80"
width="120" styleName="CardsBoxImage"
creationComplete="event.target.source =
getBitmap(event.target.source)" />