Append new value to DataGrid from Form fields : DataGrid « Grid « Flex






Append new value to DataGrid from Form fields

Append new value to 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>

   
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.Scroll DataGridScroll DataGrid
2.Set selected index for DataGridSet selected index for DataGrid
3.Variable row heightsVariable row heights
4.Multi-line data grid rowMulti-line data grid row
5.variable scope for DataGridvariable scope for DataGrid
6.Creating inline item renderer and editorCreating inline item renderer and editor
7.Using a DataGridUsing a DataGrid
8.Formatting grid lines with CSSFormatting grid lines with CSS
9.Set editing position for DataGridSet editing position for DataGrid
10.Item click event for DataGridItem click event for DataGrid
11.Editable DataGridEditable DataGrid
12.Variable row height DataGridVariable row height DataGrid
13.DataGrid change eventDataGrid change event
14.Use Panel to layout controls and hold DataGridUse Panel to layout controls and hold DataGrid
15.DataGrids take a dataProvider to populate themDataGrids take a dataProvider to populate them
16.Default setting for DataGridDefault setting for DataGrid
17.Call HTTP server and set result to DataGrid
18.Binding XML to DataGridBinding XML to DataGrid
19.DataGrid Configuration through ActionScriptDataGrid Configuration through ActionScript
20.DataGrid Validate NowDataGrid Validate Now
21.DataGrid Validate Now Selected indexDataGrid Validate Now Selected index
22.DataGrid with static string valuesDataGrid with static string values
23.DataGrid DataDataGrid Data
24.DataGrid EventsDataGrid Events
25.Sort a DataGridSort a DataGrid
26.Inline DataGrid Image ScopeInline DataGrid Image Scope
27.Print DataGrid outPrint DataGrid out
28.Enabling the user to move many items at onceEnabling the user to move many items at once
29.data provider contains fields for an artist, album name, and price.data provider contains fields for an artist, album name, and price.