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.ArrayCollec tion;
[Bindable]
private var DestData:ArrayCollection = new ArrayCollection();
private function initApp():void
{
SourceDG.dataProvider = SourceData;
}
private function moveRightHandler():void
{
DestDG.dataProvider.addIte m(SourceDG .selectedI tem);
SourceDG.dataProvider.remo veItemAt(S ourceDG.se lectedInde x)
}
private function removeHandler():void
{
SourceDG.dataProvider.addI tem(DestDG .selectedI tem);
DestDG.dataProvider.remove ItemAt(Des tDG.select edIndex)
}
]]>
</mx:Script>
<mx:ArrayCollection id="SourceData">
<mx:Object>
<mx:ItemID>1</mx:ItemID>
<mx:ItemTitle>Title1</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>2</mx:ItemID>
<mx:ItemTitle>Title2</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>3</mx:ItemID>
<mx:ItemTitle>Title3</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>4</mx:ItemID>
<mx:ItemTitle>Title4</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>5</mx:ItemID>
<mx:ItemTitle>Title5</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>6</mx:ItemID>
<mx:ItemTitle>Title6</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>7</mx:ItemID>
<mx:ItemTitle>Title7</mx:I temTitle>
</mx:Object>
<mx:Object>
<mx:ItemID>9</mx:ItemID>
<mx:ItemTitle>Title9</mx:I temTitle>
</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="tr ue"
allowDragSelection="true"
doubleClickEnabled="true"
doubleClick="moveRightHand ler()"
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>
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.ArrayCollec
[Bindable]
private var DestData:ArrayCollection = new ArrayCollection();
private function initApp():void
{
SourceDG.dataProvider = SourceData;
}
private function moveRightHandler():void
{
DestDG.dataProvider.addIte
SourceDG.dataProvider.remo
}
private function removeHandler():void
{
SourceDG.dataProvider.addI
DestDG.dataProvider.remove
}
]]>
</mx:Script>
<mx:ArrayCollection id="SourceData">
<mx:Object>
<mx:ItemID>1</mx:ItemID>
<mx:ItemTitle>Title1</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>2</mx:ItemID>
<mx:ItemTitle>Title2</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>3</mx:ItemID>
<mx:ItemTitle>Title3</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>4</mx:ItemID>
<mx:ItemTitle>Title4</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>5</mx:ItemID>
<mx:ItemTitle>Title5</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>6</mx:ItemID>
<mx:ItemTitle>Title6</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>7</mx:ItemID>
<mx:ItemTitle>Title7</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>9</mx:ItemID>
<mx:ItemTitle>Title9</mx:I
</mx:Object>
<mx:Object>
<mx:ItemID>10</mx:ItemID>
<mx:ItemTitle>Title10</mx:
</mx:Object>
</mx:ArrayCollection>
<mx:HBox width="100%" horizontalAlign="center">
<mx:DataGrid id="SourceDG"
height="280"
width="300"
y="20"
allowMultipleSelection="tr
allowDragSelection="true"
doubleClickEnabled="true"
doubleClick="moveRightHand
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks vindys for the solution
http://www.riacodes.com/flex/how-to-add-drag-and-drop-support-to-datagrids/