Tag Archives: IDropInListItemRenderer

360Flex Sample: Using a Slider as an itemRenderer

Again, this is a sample that Ryan and I showed at our 360Flex talk on custom itemRenderers. In this example, a Flex Slider is used as a renderer and an editor for a column. What makes using a Slider different from a Button, DateField or some of the other Flex components is that a Slider does not implement IDropInListItemRenderer or IDataRenderer. Therefore, by default, you cannot use it as a drop-in itemRenderer.

For the sample, I have subclassed a Flex HSlider and implemented both IDropInListItemRenderer and IDataRenderer. When implementing IDataRenderer, you need define a setter and getter for the data property. When implementing IDropInListItemRenderer, you need to define a setter and getter for the listData property.

Also, if you want the Slider to act as a renderer and editor (affecting your data), be sure to do the following:

1) Set editable=true on your DataGrid
2) Set rendererIsEditor on your DataGridColumn
3) Set editorDataField on your DataGridColumn that is using the Slider.


View the Sample Here: AmericanIdol.swf (press the button in the app to get the data to fill in the DataGrid)
Download the Source Here: SliderRenderer.zip

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