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.