Image as Button in a DataGrid
Line Break
Author: Arjan (34 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?
(1 votes, average: 5.00 out of 5)
Loading ...Comments
One Response 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!