Skip to main content

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>
Labels:

Comments

Post a Comment

Popular posts from this blog

SAAS Simple Maturity Model

There are two architectural models – commonly referred as SAAS Maturity models- that describe the transition of a service to what is called Multi-tenant efficient, highly scalable application. The SAAS Maturity model described by Microsoft has four distinct stages and is illustrated below. Another similar well-known model for SaaS-maturity is known as Forrester-model but adds another stage known as "Dynamic Business Apps-as-a-service". The three key Attributes of a SAAS Architecture: Configurability: Metadata used to configure the way the application behaves for customers Multi-tenant Efficiency : Maximizing the sharing of resources across tenants Scalability: Maximizing concurrency, resource efficiency SAAS Simple Maturity Model (Microsoft, 2006) SaaS Maturity Model (Forres...
Post a Comment
Read more

What is an ESB?

ESB is another of these amorphous terms that means different things to different people. An ESB can be thought of as the next generation of Service Oriented Architecture. Everybody knows web services today, and they have been used extensively to allow companies to break the tyranny of proprietary architectures. Now you can wire applications to service providers without having to know or worry about the provider's underlying operating system or programming language. It is an architectural concept/construct - not a technology, despite some vendors (and even gartner) telling you otherwise. You'll find many different types of technology can fulfil the conceptual role of an ESB, hence be careful not to associate it with a particular technology. Therefore designing the architecture is more important than choosing a 'product'. An Enterprise Service Bus (ESB) is the "backbone" of the service-oriented architectural model which allows different protocols to be communica...
Post a Comment
Read more

Web Service Framework comparison

Web Services is one of those concepts made all the more difficult to understand because of the myriad acronyms and abbreviations that are superfluous in any discussion. Covering all the concepts and standards associated with Web Services is a vast topic in itself. There are a large number of standards around Web Services. These standards define the norms of a Web Services implementation and ensure that a Web Services is accessed independently of the client platform. There are numerous frameworks available to select to build web service today. Below is the most widely used ones. Product Does it fit my need? Axis2.0 Apache Axis2 is a complete re-design and re-write of the widely used Apache Axis SOAP stack to build on the lessons learnt from Apache Axis. An advantage of Axis 2 is its support for the binding frameworks XMLBeans. Axis 2 with XMLBeans is widely ...
Post a Comment
Read more