Flex - Add Edit Delete rows using Data Grid

With Flex, I was scraching head for few days to achive

(a) How to use DataGrid to add, edit and delete records

(b) How to move XML data into ArrayCollection.

Now, here is the solution....

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 backgroundAlpha="0" creationComplete="srv.send()">

 <mx:Script>
  import mx.collections.ArrayCollection;  
     import mx.rpc.events.FaultEvent;
     import mx.rpc.events.ResultEvent;

 [Bindable]
 public  var employees:ArrayCollection = new ArrayCollection();
 private var xmldata:XML; 
   
 private function faultHandler(event:FaultEvent):void{
  mx.controls.Alert.show(event.fault.message,"Error in getting result");
 }
     
    private function resultHandler(event:ResultEvent):void{           
     xmldata = new XML(event.result);
            
    // Convert XML to ArrayCollection
    for each(var s:XML in xmldata.employee){
     employees.addItem(s);
    }                       
 }

 private function addRow():void 
 { 
  if (frmName.text != "") 
   employees.addItem( {name: frmName.text, email: email.text, phone: phone.text} ); 
 }
 
 private function updateRow():void 
 { 
  if (dg.selectedIndex != -1) 
   employees.setItemAt({name: frmName.text, email: email.text, phone: phone.text}, dg.selectedIndex); 
 }
  
 private function deleteRow():void 
 { 
  if (dg.selectedIndex != -1) 
  { 
   employees.removeItemAt(dg.selectedIndex); 
   frmName.text=""; 
   email.text=""; 
   phone.text=""; 
  } 
 }
 </mx:Script>

 <mx:HTTPService id="srv" url="employees.xml" useProxy="false" resultFormat="e4x"
  result="resultHandler(event)" fault="faultHandler(event)"/>
    
 <mx:HBox width="100%" height="100%">
  <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{employees}"> 
   <mx:columns> 
    <mx:Array> 
     <mx:DataGridColumn dataField="name" headerText="Name"/> 
     <mx:DataGridColumn dataField="phone" headerText="Phone"/> 
     <mx:DataGridColumn dataField="email" headerText="Email"/> 
    </mx:Array> 
   </mx:columns> 
  </mx:DataGrid>
 
  <mx:Form width="100%" height="100%"> 
   <mx:FormItem label="Name"> 
    <mx:TextInput id="frmName" width="200" text="{dg.selectedItem.name}"/> 
   </mx:FormItem> 
   
   <mx:FormItem label="Email"> 
    <mx:TextInput id="email" width="200" text="{dg.selectedItem.email}"/> 
   </mx:FormItem> 
   
   <mx:FormItem label="Phone"> 
    <mx:TextInput id="phone" width="200" text="{dg.selectedItem.phone}"/> 
   </mx:FormItem> 
   
   <mx:FormItem>      
    <mx:HBox>    
     <mx:Button label="Update" click="updateRow()"/> 
     <mx:Button label="Add" click="addRow()"/> 
     <mx:Button label="Delete" click="deleteRow()"/> 
    </mx:HBox> 
   </mx:FormItem> 
  </mx:Form>
 </mx:HBox>
</mx:Application>

 

And here is the emplyees.xml

<?xml version="1.0" encoding="UTF-8"?>
<employees>
 <employee>
  <name>Santhosh</name>
  <phone>123456</phone>
  <email>santhosh@gmail.com</email> 
 </employee>

 <employee>
  <name>Abhi</name>
  <phone>7890</phone>
  <email>abhi@gmail.com</email> 
 </employee>
   
</employees>