Problem with custom ItemRenderer

[ajonat]

Hi!

I want to create a custom itemRenderer that displays an image in a dataGrid cell. The problem I'm having is that the image is displayed AFTER I click on the cell. I mean, when the grid is first displayed it shows and error image (as if the image I wanted to show wasn't found). However, if click on a cell (to open the itemEditor) and then move to another cell (to close the itemEditor on the previous cell), the image is show correctly.

Here is the code of the Application with the dataGrid:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;

		[Embed(source="image1.gif")]
		[Bindable]
		public var IMAGE1:Class;
		
		[Embed(source="image2.gif")]
		[Bindable]
		public var IMAGE2:Class;

		[Embed(source="image3.gif")]
		[Bindable]
		public var IMAGE3:Class;
		
		[Bindable]
		public var dataProvider:ArrayCollection = new ArrayCollection();
		
		public function init():void {
			var o:Object;

			o = new Object();
			o["icon"] = IMAGE1;
			dataProvider.addItem(o);
			
			o = new Object();
			o["icon"] = IMAGE2;
			dataProvider.addItem(o);
			
			o = new Object();
			o["icon"] = IMAGE3;
			dataProvider.addItem(o);
		}
		
	]]>
</mx:Script>

<mx:DataGrid dataProvider="{dataProvider}" editable="true" enabled="true">
        <mx:columns>
		<mx:DataGridColumn id="col" dataField="icon" editable="true" itemRenderer="ImageItemRenderer"/>
		</mx:columns>
	</mx:DataGrid>

And here is the itemRenderer (ImageItemRenderer):

package
{
	import mx.controls.Image;
	import mx.events.FlexEvent;

	public class ImageItemRenderer extends Image
	{
		
		public function ImageItemRenderer() {
			super();
			addEventListener("dataChange", dataChangeHandler);
		}
		
		private function dataChangeHandler(event:FlexEvent):void {
			source = data["icon"];
		}
		
	}
}

[ajonat]

The solution was simple: variableRowHeight must be set to true in the DataGrid for the images to be displayed correctly at the loading of the application. The documentation didn't help at all and I found the answer in the source of mx::Image (although it wasn't mentioned in relation with itemRenderers). Thanks Flex!