반응형
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.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/dragging-rows-between-two-different-flex-datagrid-controls/ -->
<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>
View source is enabled in the following example.
