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

About these ads

8 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. ,

  5. Scott says:

    How can I pass in an image name to be displayed? For example, this works:

    But I want to assign the value from a passed in array, something like the following
    which doesn’t work:

    This gives me an error at runtime:
    TypeError: Error #1034: Type Coercion failed: cannot convert “folder.gif” to Class.
    (where ‘folder.gif’ was the array value of data.Image)

  6. Scott says:

    How can I pass in an image name to be displayed? For example, this works:
    <mx:DataGridColumn headerText=”” width=”20″>
    <mx:itemRenderer>
    <mx:Component>
    <mx:LinkButton icon=”@Embed(‘folder.gif’)” width=”18″ height=”15″
    click=”outerDocument.OpenMessage()” toolTip=”Open Message”/>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    But I want to assign the value from a passed in array, something like the following
    which doesn’t work:
    <mx:LinkButton icon=”{data.Image}” width=”18″ height=”15″
    click=”outerDocument.OpenMessage()” toolTip=”Open Message”/>
    This gives me an error at runtime:
    TypeError: Error #1034: Type Coercion failed: cannot convert “folder.gif” to Class.
    (where ‘folder.gif’ was the array value of data.Image)

  7. priyanka says:

    hi…i have a doubt that how to link a button to any chart which shows our data in tha form of graph….if i click the button or check box the graph should vary dynamically…can please check it out…you can get example chart from http://www.anychart.com…give me reply as soon as possible if you could do it..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: