Update data in DataGrid from Form fields

       
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
    height="600">
    <mx:Script>
        
        import mx.events.*;
        import mx.collections.*;

        public function addPerson():void {
            ac.addItem({first:firstInput.text, last:lastInput.text,email:emailInput.text});
            clearInputs();
        }
        public function removePerson():void {
            if (dg.selectedIndex >= 0) {
                ac.removeItemAt(dg.selectedIndex);
            }
        }
        public function updatePerson():void {
            if (dg.selectedItem !== null) {
                ac.setItemAt({first:firstInput.text, last:lastInput.text,email:emailInput.text}, dg.selectedIndex);
            }
        }
        public function dgChangeHandler():void {
            clearInputs();
            firstInput.text = dg.selectedItem.first;
            lastInput.text = dg.selectedItem.last;
            emailInput.text = dg.selectedItem.email;
        }
        public function clearInputs():void {
            firstInput.text = "";
            lastInput.text = "";
            emailInput.text = "";
        }
        public function myLabelFunc(item:Object):String {
            return item.first + " " + item.last;
        }
      
    </mx:Script>
    <mx:ArrayCollection id="ac">
        <mx:source>
            <mx:Object first="A" last="B" email="a@m.com" />
            <mx:Object first="C" last="D" email="c@m.com" />
            <mx:Object first="E" last="F" email="e@m.com" />
        </mx:source>
    </mx:ArrayCollection>
    <mx:DataGrid width="450" id="dg" dataProvider="{ac}" change="dgChangeHandler()">
        <mx:columns>
            <mx:DataGridColumn dataField="first" headerText="First Name" />
            <mx:DataGridColumn dataField="last" headerText="Last Name" />
            <mx:DataGridColumn dataField="email" headerText="Email" />
        </mx:columns>
    </mx:DataGrid>
    <mx:Form>
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstInput" />
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastInput" />
        </mx:FormItem>
        <mx:FormItem label="Email">
            <mx:TextInput id="emailInput" />
        </mx:FormItem>
    </mx:Form>
    <mx:HBox>
        <mx:Button label="Add New" click="addPerson()" />
        <mx:Button label="Update Selected" click="updatePerson()" />
        <mx:Button label="Remove Selected" click="removePerson()" />
        <mx:Button label="Clear" click="clearInputs()" />
    </mx:HBox>
</mx:Application>

1.	Get data from DataGrid in drag enter event
2.	Fill data from DataGrid to Form fields
3.	ArrayCollection used as the data source for DataGrid
4.	Inline data provider for DataGrid
5.	Passing data to a DataGrid control
6.	Get data from selected row in DataGrid
7.	Get DataGrid data provider
8.	Remove data from DataGrid
9.	Get the returning data from Php and feed it into DataGrid
10.	Update Chart data as DataGrid being updated
11.	Modifying data in a DataGrid controlThe following example lets you add, remove, or modify data in a DataGrid control
12.	DataGrid data with Simple Attributes
13.	DataGrid and
14.	DataGrid with object array collection
15.	Define array with Array collection in ActionScript and use it for DataGrid

Update data in DataGrid from Form fields : DataGrid Data « Grid « Flex

Related examples in the same category