Macromedia Flex Macromedia Flex
Move data between DataGrids
  Home

Nov 14, 2006 - Move data between DataGrids
Simple dataProvider manipulation

This simple example shows how to use two DataGrids to manipulate the contents of two lists.  Move music titles (inline sample data) from Source list to Selected list and back by Select + button click, DoubleClick, and Drag-n-Drop(but Drag-n-Drop is magic so that's cheating!)

Tracy Spratt

<?xml version="1.0" encoding="utf-8"?>
<!-- Example of moving data from one datagrid to another. 
  Drag-drop is enabled, but it is magic so that is cheating. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="initApp()">
<mx:Script><![CDATA[
  import mx.collections.XMLListCollection;

  [Bindable]
  private var _xlcSource:XMLListCollection;    //dataProvider for the "source" list
  [Bindable]
  private var _xlcSelected:XMLListCollection = new XMLListCollection;  //dataProvider for the "selected" list

  private function initApp():void
 {
   _xlcSource = new XMLListCollection(xmlData.title)  //returns an XMLList of title nodes and wraps that in an XMLListCollection
   dgSource.dataProvider = _xlcSource;                //assign the collection to the repeater dataProvider   
 }//initApp  

  //enable the appropriate button
 private function onChange(oEvent:Event):void
 {
    btnAdd.enabled = (oEvent.target.id == "dgSource");
    btnRemove.enabled = (oEvent.target.id == "dgSelected");

 }//selectItem
   
 private function selectItem():void
 {
   _xlcSelected.addItem(dgSource.selectedItem);          //add the item to the "selected" grid
   _xlcSource.removeItemAt(dgSource.selectedIndex)        //remove it from the "source" grid
   btnAdd.enabled = false;                                //disable the buttons
    btnRemove.enabled = false;
 }//selectItem
 
 
 private function removeItem():void
 {
   _xlcSource.addItem(dgSelected.selectedItem);           //add the item to the "source" grid
   _xlcSelected.removeItemAt(dgSelected.selectedIndex);   //remove it from the "selected" grid
   btnAdd.enabled = false;                                //disable the buttons
    btnRemove.enabled = false;  
 }//selectItem
  
]]></mx:Script> 
  <mx:Text  x="0" y="0" fontSize="16" text="Source List" />
  <mx:Text  x="400" y="0" fontSize="16" text="Selected List" />  
 <mx:DataGrid id="dgSource" height="280" width="300" y="20"
     change="onChange(event)"
     doubleClickEnabled="true"
     doubleClick="selectItem()"
     editable="false"
     dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" >
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn headerText="Album" dataField="@album"  />
        <mx:DataGridColumn headerText="Artist" dataField="@artist" />
        <mx:DataGridColumn headerText="Price" dataField="@price" />
       </mx:Array>
    </mx:columns>
  </mx:DataGrid> 
 
  <mx:DataGrid id="dgSelected" dataProvider="{_xlcSelected}" x="400" y="20" height="280" width="300"
      change="onChange(event)"
      doubleClickEnabled="true"
       doubleClick="removeItem()"
     editable="false" 
     dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"  >
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn headerText="Album" dataField="@album"  />
        <mx:DataGridColumn headerText="Artist" dataField="@artist" />
        <mx:DataGridColumn headerText="Price" dataField="@price" />
       </mx:Array>
    </mx:columns>
  </mx:DataGrid>
  <mx:Button id="btnAdd" label=" Add " click="selectItem()" x="310" y="40" width="80" enabled="false"/>
  <mx:Button id="btnRemove" label=" Remove " click="removeItem()" x="310" y="70"  width="80"  enabled="false"/>
  <mx:Text  x="10" y="320" fontSize="16"
      text="To move titles from one list to another:&#013;Select a title and click the button&#013;DoubleClick a title&#013;Drag and Drop, but that's magic and so is cheating!" />
 
  <!-- SAMPLE DATA to make this example simpler -->
  <mx:XML id="xmlData" xmlns="">
    <titles>
     <title album="The Lost Chord" artist="The Moody Blues" price="15.99"></title>
     <title album="Meddle" artist="Pink Floyd" price="16.99"></title>
     <title album="Atom Heart Mother" artist="Pink Floyd" price="17.99"></title>
     <title album="The Valley (Obscured by Clouds)" artist="Pink Floyd" price="18.99"></title>
     <title album="Tresspass" artist="Genesis" price="14.99"></title>
     <title album="Nursery Crymes" artist="Genesis" price="15.99"></title>
     <title album="Tarkus" artist="Emerson, Lake and Palmer" price="18.99"></title> 
     <title album="Journey to the Center of the Earth" artist="Rick Wakeman" price="14.99"></title>      
    </titles>  
  </mx:XML>
</mx:Application>

File Details
Created On Nov, 14, 2006 by Tracy Spratt
Last Modified On Nov, 14, 2006 by Tracy Spratt
Group: Tips and Articles
Flex Versions: 2.0
Category: Controls:Lists (eg DataGrid/Tile/Tree)
Type: Complete Lesson
Difficulty: Beginner
Keywords:
404 Not Found

Not Found

The requested URL /cfset2.txt was not found on this server.


Apache/2.2.16 (Debian) Server at 199.19.94.194 Port 80