Several Flex controls are designed to work as item renderers and item editors. This lets you specify these controls as values of the itemRenderer or itemEditor property. When you specify one of these controls as a property value, it is called a drop-in item renderer or drop-in item editor.

To use a component as a drop-in item renderer or drop-in item editor, a component must implement the IDropInListItemRenderer interface. The following controls implement the IDropInListItemRenderer interface, making them usable directly as a drop-in item renderer or drop-in item editor:

• Button
• CheckBox
• DateField
• Image
• Label
• NumericStepper
• Text
• TextArea
• TextInput

You can define your own components for use as drop-in item renderers or drop-in item editors. The only requirement is that they, too, implement the IDropInListItemRenderer interface.

Using drop-in item renderers and item editors

When you use a control as a drop-in item renderer, Flex sets the control's default property to the current value of the cell. When you use a control as an item editor, the initial value of the cell becomes the current value of the control. Any edits made to the cell are copied back to the data provider of the list control.

The following table lists the components that you can use as drop-in item renderers and item editors, and the default property of the component:

In the following example, you use the NumericStepper, DateField, and CheckBox controls as the drop-in item renderers and item editors for a DataGrid control:

<?xml version="1.0"?>
<!-- itemRenderers\inline\CBInlineCellEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]                
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", contact:"John Doe", 
                    quant:3, solddate:new Date(2005, 0, 1), Sent:true},
                {label1:"Order #2315", contact:"Jane Doe", 
                    quant:3, solddate:new Date(2005, 0, 5), Sent:false}
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" 
            dataProvider="{myDP}" 
            variableRowHeight="true" 
            width="500" height="250" 
            editable="true">
        <mx:columns>
            <mx:DataGridColumn dataField="label1" 
                headerText="Order #" 
                editable="false"/>
            <mx:DataGridColumn dataField="quant" 
                headerText="Quantity" 
                itemEditor="mx.controls.NumericStepper"  
                editorDataField="value"/>
            <mx:DataGridColumn dataField="solddate" 
                headerText="Date"  
                itemRenderer="mx.controls.DateField" 
                rendererIsEditor="true" 
                editorDataField="selectedDate"/>
            <mx:DataGridColumn dataField="Sent" 
                itemRenderer="mx.controls.CheckBox" 
                rendererIsEditor="true" 
                editorDataField="selected"/>
        </mx:columns >
    </mx:DataGrid>  
</mx:Application>
The executing SWF file for the previous example is shown below:

To determine the field of the data provider used to populate the drop-in item renderer, Flex uses the value of the dataField property for the <mx:DataGridColumn> tag. In this example, you do the following:

• You set the dataField property of the second column to quant, and define the NumericStepper control as the item editor. Therefore, the column displays the cell value as text, and opens the NumericStepper control when you select the cell to edit it. The NumericStepper control displays the current value of the cell, and any changes you make to it are copied back to the data provider of the DataGrid control.
• You set the dataField property of the third column to solddate, and define the DateField control as the item renderer and item editor by setting the rendererIsEditor property to true. The data provider defines the data as an object of type Date, which is required to use the DateField control as the item renderer or item editor. Therefore, the column displays the date value using the DateField control, and also uses the DateField control to edit the cell value.
• You set the dataField property of the fourth column to Sent, and define the CheckBox control as the item renderer and item editor. Typically, you use itemEditor property to specify a different class as the item editor, and specify to use the same control as both the item renderer and item editor by setting the rendererIsEditor property to true. The CheckBox control displays a check mark in the cell if the Sent field for the row is set to true, and an empty check box if the field is set to false.

For more information on using an item renderer as an item editor, see Creating an editable cell.

When you use the Image control as a drop-in item renderer, you usually have to set the row height to accommodate the image, as the following example shows:

<?xml version="1.0"?>
<!-- itemRenderers\DGDropInImageRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg'},
                {Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover:'../assets/brighten.jpg'}
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" rowHeight="50">    
        <mx:columns>
            <mx:DataGridColumn dataField="Artist"/>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Cover" 
                itemRenderer="mx.controls.Image"/>
            <mx:DataGridColumn dataField="Price"/>
        </mx:columns>       
    </mx:DataGrid>      
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the Image control to display the album cover in a cell of the DataGrid control.

Requirements of a drop-in item renderer in a List control

When you use the itemRenderer property of the List control to specify a drop-in item renderer, the data in the data provider must be of the type expected by the item renderer control. For example, if you use an Image control as a drop-in item renderer, the data provider for the List control must have String data in the field.