<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
//  NL4B / NL for Business
//  Copyrights 2008 NL for Business / Theo van der Sluijs
//
//  All Rights Reserved.
//
//  Creative Commons Attribution-Share Alike 3.0 Netherlands License
//  
//  You are free:
//  to copy, distribute, display, and perform the work
//  to make derivative works
//  
//  Attribution: You must give the original author credit.
//  
//  Share Alike: If you alter, transform, or build upon this work, you may distribute the resulting work only under a licence identical to this one
//  
//  For any reuse or distribution, you must make clear to others the licence terms of this work.
//  Any of these conditions can be waived if you get permission from the copyright holder.
//  Nothing in this license impairs or restricts the author's moral rights.
//  
//  http://creativecommons.org/licenses/by-sa/3.0/
//  
//  http://creativecommons.org/licenses/by-sa/3.0/nl/
//  http://creativecommons.org/international
//  
//
//  www.nl4b.com            info@nl4b.com
//     www.iamboredsoiblog.eu    theo@iamboredsoiblog.eu
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function moveRight():void { //move it to the right
                for each(var item:Object in dataGrid1.selectedItems) {// get the selected item
                    var idx:int = arrColl1.getItemIndex(item);//bind it to idx
                    arrColl2.addItem(item);//add the item to the right array collection
                    arrColl1.removeItemAt(idx);//remove the item from the left array collection
                }
            }

            private function moveLeft():void { //move it to the left
                for each(var item:Object in dataGrid2.selectedItems) { // get the selected item
                    var idx:int = arrColl2.getItemIndex(item); //bind it to idx
                    arrColl1.addItem(item); //add the item to the left array collection
                    arrColl2.removeItemAt(idx); //remove the item from the right array collection
                }
            }
        ]]>
    </mx:Script>
    
<!-- create a nice little array -->    
    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
    </mx:Array>

<!-- create the two arrays for the listboxes -->    
    <mx:ArrayCollection id="arrColl1" source="{arr}" />
    <mx:ArrayCollection id="arrColl2" />
    
    <mx:Panel label="I like to move it move it" title="I like to move it move it." width="284">
    
        <mx:HBox>
            <mx:DataGrid id="dataGrid1"
                    dataProvider="{arrColl1}"
                    allowMultipleSelection="true"
                    rowCount="5">
                <mx:columns>
                    <mx:DataGridColumn dataField="label" />
                </mx:columns>
            </mx:DataGrid>
            <mx:VBox height="100%" verticalAlign="middle">
                <mx:Button label="&gt;&gt;" click="moveRight();" />
                <mx:Button label="&lt;&lt;" click="moveLeft();" />
            </mx:VBox>
            <mx:DataGrid id="dataGrid2"
                    dataProvider="{arrColl2}"
                    allowMultipleSelection="true"
                    rowCount="5">
                <mx:columns>
                    <mx:DataGridColumn dataField="label" />
                </mx:columns>
            </mx:DataGrid>
        </mx:HBox>
    </mx:Panel>
</mx:Application>