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

5 Responses to “To add Button to DataGrid Control column”

  1. diego Says:

    don’t work on flex 3 :(

  2. kumargandhi Says:

    Hi diego,

    There’s no version difference in the code i have provided above , it will work for Flex 3, can i look at your code.

    regards,
    kumar.

  3. Oleg Says:

    Hi!

    Strange but I have a problem. I can’t handle the button’s click action on my site (j-in.org.ua)
    The code which displays datagrid is here:

    And the problems console says:

    1180: Call to a possibly undefined method deleteMyClaim. usersList/src usersList.mxml line 90 1250596255256 328

  4. driver94 Says:

    Images exceeding 300K will not be permitted. ,

Leave a Reply