Flex Blog

Search:
  • Home
  • Examples
    • Thumb

      Flex Examples

      Check out our Flex Examples!

    • Thumb

      Flash Builder Examples

      Check out our Flash Builder Examples!

    • Thumb

      AIR Examples

      Check out our AIR Examples!

    • Thumb

      Flex Mobile Examples

      Check out our Flex Mobile Examples!

    Adobe® Flex, Adobe® Flash Builder and Adobe® AIR are registered trademarks of Adobe Systems.
  • Components
    • Thumb

      WP Flex Contact Form

      Check out our WP Flex Contact Form!

    • Thumb

      Flash CountDown Plugin

      Check out our Flash CountDown Plugin!

    This is an overview of all our Flash/Flex based Components.
  • Jobs
  • Flex Books
  • Forum
  • Contact Us
Subscribe to Flex BlogSubscribe
  • Examples
  • iOS
Browse > Home / Examples / Image as Button in a DataGrid

Image as Button in a DataGrid

14 February 2009

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:

  1. Use an itemRenderer to show an Image instead of text
  2. Put the image in button mode so that it can be clicked
  3. Put an event handler on the click or double-click event of the image
  4. 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:

  1. Progressbar in Datagrid Example
  2. Images in DataGrid depending on data
  3. How to make a magnetic button in Flex 4
  4. Drag and Drop from DataGrid or AdvancedDataGrid to Tree
  5. Tree in Advanced DataGrid Example

Written by Arjan · Filed Under Examples 

Was this post useful to you?

Please rate this post, follow us @ twitter, or link to this page from your website!

1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.83 out of 5)
Loading ... Loading ...

c658bc83af68064896c3d2e74b376832delicious

Comments

5 Responses to “Image as Button in a DataGrid”

  1. warappa on March 9th, 2010 9:28 am

    Thanks for this tip! I already saw me putting up a ugly workaround but the outerDocument did the trick!

  2. Max on August 12th, 2010 8:22 am

    Hi,

    One mor great example from you!!
    Is it also possible to have different images in different rows?
    Thanks!!
    All the best,
    Max

  3. Arjan on August 12th, 2010 8:34 am

    Sure it is! Take a look at this post: http://www.flex-blog.com/images-in-datagrid-depending-on-data/

  4. Negi on February 22nd, 2011 8:27 am

    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.

  5. Mark on March 22nd, 2011 3:44 pm

    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

Get Adobe Flash player

  • +1?

  • Support Flex Blog!

  • $ 13 raised
    • 2012/01/13 8:22 PM Russell Brown donated $ 3.00
    • 2011/10/31 4:43 PM Steve Dakin donated $ 5.00
    • 2011/05/11 3:37 PM Roelof Albers donated $ 5.00
  • Stay in touch!

  • Popular Tags

    • AdvancedDataGrid
    • AIR
    • ArrayCollection
    • baseColor
    • Button
    • CursorManager
    • DataGrid
    • Dynamic
    • Effects
    • File
    • FileStream
    • Flash Builder
    • Flash Builder 4
    • Flex 4
    • Flex Mobile
    • Framework
    • Icon
    • Image
    • itemRenderer
    • LinkBar
    • Mobile
    • PHP
    • ProgressBar
    • Repeater
    • Style
    • SWIZ
    • Timer
    • Tree
    • Twitter
    • ViewStack
  • Advertisements

  • Recent Posts

    • Spooky Frenzy – iPad Game
    • Fountain Example
    • Reading & Writing files in Adobe AIR
    • CheckBox in List using MobileIconItemRenderer for Flex Mobile
    • Data Dependent decoratorClass in MobileIconItemRenderer Example
    • Flex 4 Resize Effect Example
    • Jump to next field using the Focus Manager
    • Searching Data using a Class Example
    • Flex Mobile: Two finger tap gesture to toggle actionBar visibility in a View (AIR for Android)
    • TabbedMobileApplication Example in Flex Mobile (AIR for Android)
  • Categories

    • Examples
    • Guest Poster
    • iOS
  • Archives

    • September 2011
    • July 2011
    • May 2011
    • March 2011
    • February 2011
    • November 2010
    • October 2010
    • September 2010
    • August 2010
    • June 2010
    • May 2010
    • April 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • March 2009
    • February 2009
  • Blogroll

    • Adobe Flex Jobs
    • NL for Business
  • Meta

    • Register
    • Log in
    • WordPress
    • XHTML

Copyright © 2010 Flex Blog · AdobeĀ® and AdobeĀ® Flex are registered trademarks of Adobe Systems.

WordPress Adobe Flex Adobe Flash Builder Adobe AIR Creative Commons License

  • Popular Posts

    • Progressbar in Datagrid Example 13 votes, average: 5.00 out of 513 votes, average: 5.00 out of 513 votes, average: 5.00 out of 513 votes, average: 5.00 out of 513 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction 8 votes, average: 5.00 out of 58 votes, average: 5.00 out of 58 votes, average: 5.00 out of 58 votes, average: 5.00 out of 58 votes, average: 5.00 out of 5 (5.00 out of 5)
    • List Directory with AIR in Flex 4 7 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Flex FlashVars in AS3 Example 7 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 57 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Flex Dynamic Chart Example 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)