Link to home
Start Free TrialLog in
Avatar of myBlueSky
myBlueSky

asked on

flex datagrids with drag/drop enabled

I have two flex datagrids with drag/drop enabled. There are two buttons to handle moving the items between the datagrids one by one. I would like to enable moving multiple items using same buttons handler. Please advice


Thanks.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
      <mx:Script>
            <![CDATA[
                  import mx.collections.ArrayCollection;
                  
                  [Bindable]
                  private var DestData:ArrayCollection = new ArrayCollection();

                  private function initApp():void
                  {
                        SourceDG.dataProvider = SourceData;
                  }


                  private function moveRightHandler():void
                  {
                           DestDG.dataProvider.addItem(SourceDG.selectedItem);
                           SourceDG.dataProvider.removeItemAt(SourceDG.selectedIndex)
                  }


                  private function removeHandler():void
                  {
                           SourceDG.dataProvider.addItem(DestDG.selectedItem);
                           DestDG.dataProvider.removeItemAt(DestDG.selectedIndex)                         
                  }
            ]]>
      </mx:Script>

      <mx:ArrayCollection id="SourceData">
         <mx:Object>
            <mx:ItemID>1</mx:ItemID>
            <mx:ItemTitle>Title1</mx:ItemTitle>
         </mx:Object>
         
         <mx:Object>
            <mx:ItemID>2</mx:ItemID>
            <mx:ItemTitle>Title2</mx:ItemTitle>
         </mx:Object>
         
         <mx:Object>
            <mx:ItemID>3</mx:ItemID>
            <mx:ItemTitle>Title3</mx:ItemTitle>
         </mx:Object>
         
         <mx:Object>
            <mx:ItemID>4</mx:ItemID>
            <mx:ItemTitle>Title4</mx:ItemTitle>
         </mx:Object>
                 
         <mx:Object>
            <mx:ItemID>5</mx:ItemID>
            <mx:ItemTitle>Title5</mx:ItemTitle>
         </mx:Object>
                                                   
           <mx:Object>
            <mx:ItemID>6</mx:ItemID>
            <mx:ItemTitle>Title6</mx:ItemTitle>
         </mx:Object>
         
            <mx:Object>
            <mx:ItemID>7</mx:ItemID>
            <mx:ItemTitle>Title7</mx:ItemTitle>
         </mx:Object>
                                 
           <mx:Object>
            <mx:ItemID>9</mx:ItemID>
            <mx:ItemTitle>Title9</mx:ItemTitle>
         </mx:Object>  
     
           <mx:Object>
            <mx:ItemID>10</mx:ItemID>
            <mx:ItemTitle>Title10</mx:ItemTitle>
         </mx:Object>
               
      </mx:ArrayCollection>
     
      <mx:HBox width="100%"  horizontalAlign="center">

            <mx:DataGrid id="SourceDG"
                               height="280"
                               width="300"
                               y="20"
                               allowMultipleSelection="true"
                               allowDragSelection="true"
                               doubleClickEnabled="true"
                               doubleClick="moveRightHandler()"
                               dragEnabled="true"
                               dropEnabled="true"
                               dragMoveEnabled="true">
                  <mx:columns>
                        <mx:DataGridColumn headerText="Item ID" width="100" dataField="ItemID"/>
                        <mx:DataGridColumn headerText="Item Title" dataField="ItemTitle"/>
                  </mx:columns>
            </mx:DataGrid>
            <mx:VBox height="100%" verticalAlign="middle">
                  <mx:Button id="moveRightBtn"
                                 label=" To Right "
                                 click="moveRightHandler()"
                                 width="80"
                                />
                  <mx:Button id="btnRemove"
                                 label=" To Left "
                                 click="removeHandler()"
                                 width="80"
                                 />
            </mx:VBox>
            <mx:DataGrid id="DestDG"  dataProvider="{DestData}"
                               height="280"
                               width="300"
                               doubleClickEnabled="true"
                               doubleClick="removeHandler()"
                               dragEnabled="true"
                               dropEnabled="true"
                               dragMoveEnabled="true">
                  <mx:columns>
                        <mx:DataGridColumn headerText="Item ID" width="100" dataField="ItemID"/>
                        <mx:DataGridColumn headerText="Item Title" dataField="ItemTitle"/>
                  </mx:columns>
            </mx:DataGrid>


      </mx:HBox>


</mx:Application>

ASKER CERTIFIED SOLUTION
Avatar of vindys80
vindys80
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of halfbloodprince
halfbloodprince

Avatar of myBlueSky

ASKER

Thanks vindys for the solution