Image as Button in a DataGrid
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Just as the MouseWheel controlled slider idea, I had this idea when I was working on my flex MP3 player as well. I wanted to give the user the possibility to add tracks to a playlist by clicking a small plus icon in a DataGrid. There are a couple of things that have to be done to achieve this:
- Use an itemRenderer to show an Image instead of text
- Put the image in button mode so that it can be clicked
- Put an event handler on the click or double-click event of the image
- Code the event handler
Now the first two steps are simple, just use the following code to display an image instead of text in the datagrid column:
1 2 3 4 5 6 7 8 9 10 11 12 | <mx:DataGridColumn width="20"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalAlign="center"> <mx:Image source="@Embed(source='assets/add_icon.png')" buttonMode="true"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> |
The third step is the tricky one, and let me explain why. When I was coding a put a simple event handler on the click event of the Image like this:
1 | click="handleClick()" |
Ofcourse I also implemented some function that handled the click, but that didn’t work, I got an error message telling me that the function was not defined. At first i though I made a mistake somewhere with upper/lowercase but that wasn’t the case.
As it turns out, the <mx:Component> tag makes a new component that cannot directly call any of the methods that you implemented in your main application. To make this possible, you need a public event handler in your main application and the correct code to call it is this:
1 | click="outerDocument.handleClick()" |
So the outerDocument prefix is necessary to get the correct functionality.
I created a small example to show you how it all works together, use right mouseclick > view source to view the source code.
Related posts:
- Progressbar in Datagrid Example
- Images in DataGrid depending on data
- How to make a magnetic button in Flex 4
- Drag and Drop from DataGrid or AdvancedDataGrid to Tree
- Tree in Advanced DataGrid Example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(6 votes, average: 4.83 out of 5)
Loading ...Comments
5 Responses to “Image as Button in a DataGrid”
Thanks for this tip! I already saw me putting up a ugly workaround but the outerDocument did the trick!
Hi,
One mor great example from you!!
Is it also possible to have different images in different rows?
Thanks!!
All the best,
Max
Sure it is! Take a look at this post: http://www.flex-blog.com/images-in-datagrid-depending-on-data/
this is really helpful. But what if I want to show only one image on datagrid cell based on certain condition?
Using itemrenderer we can add button or link in every cell of column. I want to add single link button in single cell based on data from xml.
Is it possible to have states in a datagrid such that on rollover of a line of the datagrid the button is visible and rollout the button is invisible?
thanks