ArrayCollection used as the data source for DataGrid : DataGrid Data « Grid « Flex






ArrayCollection used as the data source for DataGrid

ArrayCollection used as the data source for DataGrid
       
<?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>

   
    
    
    
    
    
    
  








Related examples in the same category

1.Get data from DataGrid in drag enter eventGet data from DataGrid in drag enter event
2.Fill data from DataGrid to Form fieldsFill data from DataGrid to Form fields
3.Update data in DataGrid from Form fieldsUpdate data in DataGrid from Form fields
4.Inline data provider for DataGridInline data provider for DataGrid
5.Passing data to a DataGrid controlPassing data to a DataGrid control
6.Get data from selected row in DataGridGet data from selected row in DataGrid
7.Get DataGrid data providerGet DataGrid data provider
8.Remove data from DataGridRemove data from DataGrid
9.Get the returning data from Php and feed it into DataGridGet the returning data from Php and feed it into DataGrid
10.Update Chart data as DataGrid being updatedUpdate 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 controlModifying data in a DataGrid controlThe following example lets you add, remove, or modify data in a DataGrid control
12.DataGrid data with Simple AttributesDataGrid data with Simple Attributes
13.DataGrid and DataGrid and <mx:ArrayCollection>
14.DataGrid with object array collectionDataGrid with object array collection
15.Define array with Array collection in ActionScript and use it for DataGridDefine array with Array collection in ActionScript and use it for DataGrid