To add Button to DataGrid Control column

To do this we have to use itemRenderer property of the column of the datagrid control.

Define a component of type HBox  and put a button with a image in it.( if u wanted ).

like the below code.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml”  horizontalAlign=”center”>
<mx:Button icon=”@Embed(source=’images/image1.png’)” id=”wordbtn”/>
</mx:HBox>

save it as dgimage.mxml.

now in the App  define a Datagrid control and in the datagridcolumn use itemRenderer property and mention the name of the component u difined which contains the button,here its “dgimage“.

and the code for the datagrid is given below.

<mx:DataGrid top=”35″ right=”5″ bottom=”5″ left=”5″ dataProvider=”{arrforms}” id=”datagrid”  itemClick=”itemClickEvent(event)” toolTip=”click to download form”>
<mx:columns>
<mx:DataGridColumn headerText=”S.no”  width=”35″ textAlign=”left”/>
<mx:DataGridColumn headerText=” name”  textAlign=”left”/>
<mx:DataGridColumn headerText=”button” itemRenderer=”dgimage” dataField=”IMAGE” width=”90″ textAlign=”left”/>
</mx:columns>
</mx:DataGrid>

Now the column with  headerText=”button” contains the button

Leave comments for suggestions