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; label1.text=value[dataField1].name; } }

Source: src.zip

---

Possibly related posts: (automatically generated)

• Changing text color in a DataGrid using itemRenderers
• Nested Inline ItemRenderers – A List in a DataGrid
• 360Flex Sample: Building a Performant itemRenderer by extending UIComponent
• DataGrid Item Renderers… Think outside the

~ by jlafferty on May 22, 2009.