Flex 3: Adding image and text in DataGrid

This is a normal dataGrid where we insert data. But if we want to insert an image along with data in a column then it will look like this.

 

This we can do by creating a simple itemRenderer component. In this component we can design the UI as an image and a text box which will accept data from the dataGrid. A dataGrid column will specify its itemRenderer as below.itemRenderer=“components.ImageData“where ImageData is a simple component with a image and text control. The ItemData’s code goes like this.

<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100%” height=”20” horizontalGap=”1” horizontalAlign=”center” verticalAlign=”middle“>

<mx:Image source=”{data.@image}” verticalAlign=”middle” horizontalAlign=”left” scaleContent=”false” maintainAspectRatio=”true“/>

<mx:Label text=”{data.@Key}” width=”50%“/></mx:HBox>

Here component accepts the data from dataGrid with the help of data.