360Flex Sample: Implementing IDropInListItemRenderer to create a reusable itemRenderer


This is one of the samples that Ryan and I showed at our Flex 360 presentation for building custom itemRenderers. In this sample, I am using the same itemRenderer for 3 of the four columns. This itemRenderer has an Image and Label inside of a Canvas.

To re-use this itemRenderer, you need to use the listData property on the itemRenderer to figure out which column the itemRenderer is sitting in. The listData property is of type DataGridBaseListData which gives you the ‘dataField’ of that column.

To use the listData property, your itemRenderer must implement the interface mx.controls.listClasses.IDropInListItemRenderer. To implement this interface, the only necessary code is to add a getter and setter for the listData property. The listData property is always set before the data property, therefore, in the function where your data property gets set, you can get the value of the listData.dataField property to figure out what column you are in. Here is a snippet of the code from the itemRenderer used in this example. In this data setter, we determine what the source of the Image should be as well as the Label text:

override public function set data(value:Object):void
if(value != null)  {
super.data = value;
//Determine the column that this renderer is displaying
var dataField1:String = DataGridListData(_listData).dataField;

// Set the source for the Image and text for the Label that this
// renderer is displaying.
image1.source = value[dataField1].url;

Source: src.zip

8 responses

  1. cannot download the source file …..

    1. @Dev: Sorry about that, you should be able to download the source now.

  2. Thank you soo much for this! I’ve been trying to tackle this very issue for months now. All examples i found so far have been hacked to work. Even the example given by Adobe

  3. Jed Schneider | Reply

    Joan, thanks for the great talk at 360|Flex. We spoke briefly about you taking a peak at my itemRenderer with a date object and label that is not reusing itself properly, would you still be willing to take a look at it?

  4. Thanks, i have to lost much time to find method how add icon into AdvancedDatagrid. I follow your article and I do my thinking. Thanks much!


  5. Thanks, It is useful one.

  6. I seems that the source link is broken again. Any chance you could put the files back up.

    1. Sorry! Its back up!

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: