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>

LVL 1
myBlueSkyAsked:
Who is Participating?
 
vindys80Commented:
Try this and see if this is the one you looking for. May be you can do some optimizations.

Thanks,
Vindys
<?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
                  {
                  	var selectedArr:Array = SourceDG.selectedItems;
                  	var selectedIndices:Array = SourceDG.selectedIndices;
                  	selectedIndices.sort(Array.NUMERIC | Array.DESCENDING );
                  	for( var i:int = 0; i < selectedArr.length; i++ ){
                  		SourceDG.dataProvider.removeItemAt(selectedIndices[i])
                  		DestDG.dataProvider.addItem(selectedArr[i]); 
                  	}
                  }


                  private function removeHandler():void
                  {
                  	var selectedArr:Array = DestDG.selectedItems;
                  	var selectedIndices:Array = DestDG.selectedIndices;
                  	selectedIndices.sort(Array.NUMERIC | Array.DESCENDING );
                  	for( var i:int = 0; i < selectedArr.length; i++ ){
                  		DestDG.dataProvider.removeItemAt(selectedIndices[i])
                  		SourceDG.dataProvider.addItem(selectedArr[i]); 
                  	}
                  }
            ]]>
      </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" allowMultipleSelection="true"
                               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>

Open in new window

0
 
halfbloodprinceCommented:
0
 
myBlueSkyAuthor Commented:
Thanks vindys for the solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.