By default, Flex expects an item editor to return a single value to the list-based control. You use the editorDataField property of the list-based control to specify the property of the item editor that contains the new data. Flex converts the value to the appropriate data type for the cell.

The default item editor is a TextInput control. Therefore, the default value of the editorDataField property is "text", which corresponds to the text property of the TextInput control. If you specify a custom item editor, you also set the editorDataField property to the appropriate property of the item editor, as the following example shows:

<?xml version="1.0"?>
<!-- itemRenderers\dropin\DropInNumStepper.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", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        variableRowHeight="true" 
        editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="label1" headerText="Order #"/>
            <mx:DataGridColumn dataField="quant" 
                headerText="Qty"
                itemEditor="mx.controls.NumericStepper"  
                editorDataField="value"
            />
        </mx:columns >
    </mx:DataGrid> 
</mx:Application>
The executing SWF file for the previous example is shown below:

In the preceding example, you use a NumericStepper control as the item editor, and therefore set the editorDataField property to "value", the property of the NumericStepper control that contains the new cell data.

For information about returning multiple values from an item editor, see Example: Passing multiple values back from an item editor.

Defining a property to return data

An item editor can contain more than a single component. For example, the following item editor contains a parent VBox container with a child CheckBox control used to edit the cell:

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
     backgroundColor="yellow">

    <mx:Script>
        <![CDATA[
            // Define a property for returning the new value to the cell.
            public var cbSelected:Boolean;            
        ]]>
    </mx:Script>
   
    <mx:CheckBox id="followUpCB" label="Follow up needed" 
        height="100%" width="100%" 
        selected="{data.FollowUp}" 
        click="cbSelected=followUpCB.selected" 
        updateComplete="cbSelected=followUpCB.selected;"/>
</mx:VBox>

In the preceding example, when the user selects the cell, Flex displays the CheckBox control in a yellow background, as defined by the parent VBox container. The user then selects or deselects the CheckBox control to set the new value for the cell.

To return a value to the list-based control, the VBox container defines a new property named cbSelected. This is necessary because you can only set the editorDataField property to a property of the top-level component of the item editor. That means you cannot set editorDataField to the selected property of the CheckBox control when it is a child of the VBox container.

You use the updateComplete event to set the value of the cbSelected property in case the user selects the cell to open the CheckBox control, but does not change the state of the CheckBox control.

In the following example, you use this item editor in a DataGrid control that displays a list of customer contacts. The list includes the company name, contact name, and phone number, and a column that indicates whether you must follow up with that contact.

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\MainDGCheckBoxEditor.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([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', Date: '5/5/05' , FollowUp: true },
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', Date: '5/6/05' , FollowUp: false} 
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" 
        dataProvider="{initDG}" 
        editable="true" >  
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="Date"/>
            <mx:DataGridColumn dataField="FollowUp" 
                width="150" 
                headerText="Follow Up?" 
                itemEditor="myComponents.EditorDGCheckBox" 
                editorDataField="cbSelected"/>
        </mx:columns>       
    </mx:DataGrid>  
</mx:Application>
The executing SWF file for the previous example is shown below:

Notice that the editorDataField property is set to cbSelected, the new property of the VBox container.

You also use this same mechanism with an inline item renderer that contains multiple controls. For example, you can modify the previous DataGrid example to use an inline item editor, rather than an item editor component, as the following code shows:

<?xml version="1.0"?>
<!-- itemRenderers\inline\InlineDGCheckBoxEditor.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([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', Date: '5/5/05' , FollowUp: true },
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', Date: '5/6/05' , FollowUp: false} 
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" 
        dataProvider="{initDG}" 
        editable="true">  
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="Date"/>
            <mx:DataGridColumn dataField="FollowUp" 
                width="150" 
                headerText="Follow Up?" 
                editorDataField="cbSelected">
                
                <mx:itemEditor>
                    <mx:Component>
                        <mx:VBox backgroundColor="yellow">          
                            <mx:Script>
                                <![CDATA[
                                    // Define a property for returning 
                                    // the new value to the cell.
                                    [Bindable]
                                    public var cbSelected:Boolean;
                                ]]>     
                            </mx:Script>
                       
                            <mx:CheckBox id="followUpCB" 
                                label="Follow up needed" 
                                height="100%" width="100%" 
                                selected="{data.FollowUp}" 
                                click="cbSelected=followUpCB.selected"/>
                        </mx:VBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>       
    </mx:DataGrid>  
</mx:Application>
The executing SWF file for the previous example is shown below: