Search Flex Samples

Dragging rows between two different Flex DataGrid controls

The following example shows how you can use the dragEnabled, dropEnabled, and dragMoveEnabled properties with the Flex DataGrid control to copy and move rows between different data grids.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal"

verticalAlign="middle"

backgroundColor="white">


<mx:Array id="arr">

<mx:Object colA="Item A.0" colB="Item B.0" colC="Item C.0" />

<mx:Object colA="Item A.1" colB="Item B.1" colC="Item C.1" />

<mx:Object colA="Item A.2" colB="Item B.2" colC="Item C.2" />

<mx:Object colA="Item A.3" colB="Item B.3" colC="Item C.3" />

<mx:Object colA="Item A.4" colB="Item B.4" colC="Item C.4" />

<mx:Object colA="Item A.5" colB="Item B.5" colC="Item C.5" />

<mx:Object colA="Item A.6" colB="Item B.6" colC="Item C.6" />

<mx:Object colA="Item A.7" colB="Item B.7" colC="Item C.7" />

<mx:Object colA="Item A.8" colB="Item B.8" colC="Item C.8" />

<mx:Object colA="Item A.9" colB="Item B.9" colC="Item C.9" />

</mx:Array>


<mx:ApplicationControlBar dock="true">

<mx:Form>

<mx:FormItem label="DataGrid #1:"

direction="horizontal">

<mx:CheckBox id="dg1_dragEnabled"

label="dragEnabled" />

<mx:CheckBox id="dg1_dropEnabled"

label="dropEnabled" />

<mx:CheckBox id="dg1_dragMoveEnabled"

label="dragMoveEnabled" />

</mx:FormItem>

<mx:FormItem label="DataGrid #2:"

direction="horizontal">

<mx:CheckBox id="dg2_dragEnabled"

label="dragEnabled" />

<mx:CheckBox id="dg2_dropEnabled"

label="dropEnabled" />

<mx:CheckBox id="dg2_dragMoveEnabled"

label="dragMoveEnabled" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>


<mx:VBox width="50%">

<mx:Label text="DataGrid #1" />

<mx:DataGrid id="dataGrid1"

width="100%"

rowHeight="22"

dataProvider="{arr}"

dragEnabled="{dg1_dragEnabled.selected}"

dragMoveEnabled="{dg1_dragMoveEnabled.selected}"

dropEnabled="{dg1_dropEnabled.selected}"

verticalScrollPolicy="on">

<mx:columns>

<mx:DataGridColumn dataField="colA"

headerText="Column A" />

<mx:DataGridColumn dataField="colB"

headerText="Column B" />

<mx:DataGridColumn dataField="colC"

headerText="Column C" />

</mx:columns>

</mx:DataGrid>

<mx:Label text="{dataGrid1.dataProvider.length} items" />

</mx:VBox>


<mx:VBox width="50%">

<mx:Label text="DataGrid #2" />

<mx:DataGrid id="dataGrid2"

width="100%"

rowHeight="22"

dataProvider="[]"

dragEnabled="{dg2_dragEnabled.selected}"

dragMoveEnabled="{dg2_dragMoveEnabled.selected}"

dropEnabled="{dg2_dropEnabled.selected}"

verticalScrollPolicy="on">

<mx:columns>

<mx:DataGridColumn dataField="colA"

headerText="Column A" />

<mx:DataGridColumn dataField="colB"

headerText="Column B" />

<mx:DataGridColumn dataField="colC"

headerText="Column C" />

</mx:columns>

</mx:DataGrid>

<mx:Label text="{dataGrid2.dataProvider.length} items" />

</mx:VBox>


</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples