Flex: Multiple Datagrid Drop and Drop on a Single Page

Flex has handy default event handlers that handle basic drag and drop between DataGrids. On a recent project, I wanted to enable drag and drop for reordering within a single grid, but I wanted to restrict the user from dragging from one grid into another.

Flex provides a DragManager class to provide full control over these events, and you might be tempted to reach for it, but there’s an easier method. Basically, you enable drag and drop as you normally would:

1
2
3
dragEnabled="true"
dragMoveEnabled="true"
dropEnabled="true"

but also specify a custom drop handler where you check the initiator of event with the event target. Here’s the full source that shows the basic idea. You can override other events, like dragEnter, to provide full functionality.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" width="100%"
    paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
    <mx:DataGrid 
        id="datagrid1"
        dataProvider="{dataProvider1}"
        width="50%"
        dragEnabled="true"
        dragMoveEnabled="true"
        dropEnabled="true"
        dragDrop="dragDropHandler(event);"
        sortableColumns="false"
        draggableColumns="false">
       <mx:columns>
           <mx:DataGridColumn
               headerText="Data"
               dataField="data"
               draggable="false" />
               <mx:DataGridColumn
                   headerText="More Data"
                   dataField="moredata"
                   draggable="false" />
       </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid 
    id="datagrid2"
    dataProvider="{dataProvider2}"      
    width="50%"
    dragEnabled="true"
    dragMoveEnabled="true"
    dropEnabled="true"
    dragDrop="dragDropHandler(event);"
    sortableColumns="false"
    draggableColumns="false">
        <mx:columns>
           <mx:DataGridColumn
               headerText="Data"
               dataField="data"/>
           <mx:DataGridColumn
               headerText="More Data"
               dataField="moredata" />
        </mx:columns>
   </mx:DataGrid>
    <mx:Script>
               <![CDATA[
                       import mx.collections.ArrayCollection;                       
                       import mx.events.DragEvent;

            private var dataProvider1:Array = [
                {'data': 'grid 1 data 1', 'moredata': 'grid 1 more data 1'},
                {'data': 'grid 1 data 2', 'moredata': 'grid 1 more data 2'},
                {'data': 'grid 1 data 3', 'moredata': 'grid 1 more data 3'}
            ]

            private var dataProvider2:Array = [
                {'data': 'grid 2 data 1', 'moredata': 'grid 2 more data 1'},
                {'data': 'grid 2 data 2', 'moredata': 'grid 2 more data 2'},
                {'data': 'grid 2 data 3', 'moredata': 'grid 2 more data 3'}
            ]

            private function dragDropHandler(evt:DragEvent):void{
                       if(evt.dragInitiator != evt.currentTarget){
                                var dragObj:Array= evt.dragSource.dataForFormat("items") as Array;
                                ((evt.dragInitiator as DataGrid).dataProvider as ArrayCollection).addItem(dragObj[0]);
                               evt.preventDefault();
                       }
               }

               ]]>
       </mx:Script>
</mx:Panel>
Posted: November 06, 2009 / 0 comments

Comments