Use an inline item editor, rather than a component

     

<?xml version="1.0"?>
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="700">
    <mx:Script>
        
        import mx.events.DataGridEvent;
        import mx.collections.ArrayCollection;
        import mx.controls.TextInput;
        public var newCity:String;
        public var newState:String;
        [Bindable]
        public var initDG:ArrayCollection = new ArrayCollection([
            {Company: 'A', Contact: 'AA',Phone: '123-555-1212', City: 'Boston', State: 'MA'},
            {Company: 'B', Contact: 'BB',Phone: '123-555-3434', City: 'SanFrancisco', State: 'CA'}
        ]);
        public function processData(event:DataGridEvent):void {
            if(event.dataField=='City/State'){
                event.preventDefault();
                myGrid.editedItemRenderer.data.City = myEditor(myGrid.itemEditorInstance).setCity.text;
                myGrid.editedItemRenderer.data.State = myEditor(myGrid.itemEditorInstance).pickState.selectedItem;
                myGrid.destroyItemEditor();
                myGrid.dataProvider.itemUpdated(myGrid.editedItemRenderer);
            }
        }
      
    </mx:Script>
    <mx:DataGrid id="myGrid" rowHeight="75" dataProvider="{initDG}"
        editable="true" itemEditEnd="processData(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false" />
            <mx:DataGridColumn dataField="Contact" />
            <mx:DataGridColumn dataField="Phone" />
            <mx:DataGridColumn dataField="City/State" width="150">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Text selectable="false" width="100%"
                            text="{data.City}, {data.State}" />
                    </mx:Component>
                </mx:itemRenderer>
                <mx:itemEditor>
                    <mx:Component className="myEditor">
                        <mx:VBox backgroundColor="yellow">
                            <mx:TextInput id="setCity" width="130" text="{data.City}" />
                            <mx:ComboBox id="pickState" selectedItem="{data.State}">
                                <mx:dataProvider>
                                    <mx:String>AL</mx:String>
                                    <mx:String>AK</mx:String>
                                    <mx:String>AR</mx:String>
                                    <mx:String>CA</mx:String>
                                    <mx:String>MA</mx:String>
                                </mx:dataProvider>
                            </mx:ComboBox>
                        </mx:VBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

Related examples in the same category

1.	Use ComboBox as itemEditor
2.	Using a DateField or ComboBox control as a drop-in item editor
3.	Define an event listener for the itemEditEnd event that uses the NumberFormatter class to format cell value
4.	Use itemEditEnd event to ensure that the user did not enter an empty String
5.	To prevent cell editing, call the preventDefault() method from within your event listener
6.	Show an event listener for itemEditEnd event using column index, row index, and value properties
7.	Inline CheckBox Editor With Offsets
8.	Returning data from an item editor
9.	Use mx.controls.NumericStepper as DataGridColumn editor
10.	use to define an inline item editor
11.	inline item editor contains a single control that supports the data property
12.	DataGrid Dropin Editor
13.	Inline DataGrid Editor
14.	Cancel the edit action and maintain edit state
15.	Get cell index in cell onEditEnd event
16.	Edited Row and column
17.	Item Editor Size and Position
18.	Item Edit Beginning Event
19.	Item Edit End Event

Use an inline item editor, rather than a component : DataGrid ItemEditor « Grid « Flex

Related examples in the same category