Image in a DataGrid

Question

Hello, I want to introduce a image in one datagrid column but I don't know why. I'm trying doing that:
private var columns:ArrayCollection = new ArrayCollection([
                            {headerText: 'Image', dataField: 'column1', itemRenderer:'xxxxx', width: '5' },
private var date:ArrayCollection = new ArrayCollection([
               {column1:'../img/clip.png',
               {column1:'../img/clip2.png,}])
What I have to put in itemRenderer? Or I'm doing totaly wrong
It's better if I do
[Embed(source="img/clip.png")] public var buzonIcon:Class;
and then use buzenIcon in column1:.....
What is the solution?
Thanks!

Answer 1

Hi, Pls find the solution of the your problem.
MainApplication.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dgArrayCollection:ArrayCollection=
new ArrayCollection([
{imgPath:'assets/img1.png', names:'John'},
{imgPath:'assets/img2.png', names:'Alex'},
{imgPath:'assets/img3.png', names:'Peter'},
{imgPath:'assets/img1.png', names:'Sam'},
{imgPath:'assets/img2.png', names:'Alis'},
{imgPath:'assets/img3.png', names:'Robin'},
{imgPath:'assets/img1.png', names:'Mark'},
{imgPath:'assets/img2.png', names:'Steave'},
{imgPath:'assets/img3.png', names:'Fill'},
{imgPath:'assets/img1.png', names:'Abraham'},
{imgPath:'assets/img2.png', names:'Hennery'},
{imgPath:'assets/img3.png', names:'Luis'},
{imgPath:'assets/img1.png', names:'Herry'},
{imgPath:'assets/img2.png', names:'Markus'},
{imgPath:'assets/img3.png', names:'Flip'},
{imgPath:'assets/img1.png', names:'John_1'},
{imgPath:'assets/img2.png', names:'Alex_1'},
{imgPath:'assets/img3.png', names:'Peter_1'},
{imgPath:'assets/img1.png', names:'Sam_1'},
{imgPath:'assets/img2.png', names:'Alis_1'},
{imgPath:'assets/img3.png', names:'Robin_1'},
]]>
</mx:Script>
<mx:VBox width="300" height="100%"
horizontalAlign="center"
verticalAlign="middle">
<mx:DataGrid id="dg" width="50%"
height="100%"
borderStyle="none"
dataProvider="{dgArrayCollection}"
>
<mx:columns>
<mx:DataGridColumn dataField="color" itemRenderer="DatagridItemRenderer"/>
<mx:DataGridColumn dataField="names" headerText="Names"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>
DatagridItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="30" horizontalGap="5"
horizontalAlign="center"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
]]>
</mx:Script>
<mx:Image width="75" height="30" source="{data.imgPath}"/>
</mx:HBox>
Let me know if you have any issue with this.
With Regards,
Shardul Singh Bartwal