Drag drop from Datagrid to Tree

[Deepak MS <me...@gmail.com>]

Hello,
I'm trying to implement drag-drop between datagrid and tree. I need to
simply drag and drop single or multiple datagrid items in a tree node.
Looks like just enabling dragEnabled, dropEnabled and dragMoveEnabled
doesn't work. And hence I added dragEnter, dragOver and dragDrop event
handlers on Tree.

When dragOver  or dragDrop event gets triggered, how do I know on which
node is the dragged item hovering over? I did not get any source in my
dragOver's or dragDrop's DragEvent.

Any way how to go about it?

Screenshots for reference:
http://snag.gy/MSx7S.jpg
http://snag.gy/meLwE.jpg

Re: Drag drop from Datagrid to Tree

[Mark Kessler <ke...@gmail.com>]

Well adding dragEnabled to the datagrid allows you to drag items from the
datagrid to other items.  The dropEnabled when added to the datagrid,
allows it to accept items dropped on it.  The dragMoveEnabled should just
allow you to move items around inside the datagrid... like reordering.

The MX tree is a little more work since you're mixing s/mx.

Use the dragEnter event on the tree to accept the item, display the
copy/move symbol, and the target line.  This will allow the dragOver event
on the tree to become active and allow updating the target line. You can
use the "calculateDropIndex(event)" method by passing it the DragEvent.
The dropIndex will be where you want to insert the copied item.  I created
a simple example in hopes it would explain it better.  It's not efficient,
but it shows some of the working pieces.



<?xml version="1.0" encoding="utf-8"?>
<!---
   Test application
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="onCreationComplete();" >

    <fx:Script>
        <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.XMLListCollection;
        import mx.core.UIComponent;
        import mx.events.DragEvent;
        import mx.managers.DragManager;



//--------------------------------------------------------------------------
        //
        //  Variables
        //

//--------------------------------------------------------------------------
        [Bindable]
        protected var acDataGridTestData:ArrayCollection = new
ArrayCollection();

        [Bindable]
        protected var xmllcTreeTestData:XMLListCollection = new
XMLListCollection();



//--------------------------------------------------------------------------
        //
        //  Event Handlers
        //

//--------------------------------------------------------------------------
        protected function onCreationComplete():void
        {
            acDataGridTestData.addItem({c1:"row1 col1", c2:"row1 col2",
c3:"row1 col3"});
            acDataGridTestData.addItem({c1:"row2 col1", c2:"row2 col2",
c3:"row2 col3"});
            acDataGridTestData.addItem({c1:"row3 col1", c2:"row3 col2",
c3:"row3 col3"});
            acDataGridTestData.addItem({c1:"row4 col1", c2:"row4 col2",
c3:"row4 col3"});
            acDataGridTestData.addItem({c1:"row5 col1", c2:"row5 col2",
c3:"row5 col3"});
            acDataGridTestData.addItem({c1:"row6 col1", c2:"row6 col2",
c3:"row6 col3"});
            acDataGridTestData.addItem({c1:"row7 col1", c2:"row7 col2",
c3:"row7 col3"});
            acDataGridTestData.addItem({c1:"row8 col1", c2:"row8 col2",
c3:"row8 col3"});
            acDataGridTestData.addItem({c1:"row9 col1", c2:"row9 col2",
c3:"row9 col3"});
            acDataGridTestData.addItem({c1:"row10 col1", c2:"row10 col2",
c3:"row10 col3"});

            xmllcTreeTestData.addItem(<node label="set1"><node label="set1
child1"/><node label="set1 child2"/></node>);
            xmllcTreeTestData.addItem(<node label="set2"><node label="set2
child1"/><node label="set2 child2"/></node>);
            xmllcTreeTestData.addItem(<node label="random1" />);
            xmllcTreeTestData.addItem(<node label="random2" />);
        }


        protected function myTree_OnDragDrop(event:DragEvent):void
        {
            //Get the drop index.
            var dropIndex:int = myTree.calculateDropIndex(event);

            //Copy your items from the datagrid here.
            xmllcTreeTestData.addItemAt(<node label="My new Item"/>,
dropIndex);

            //Stop showing the target line
            myTree.hideDropFeedback(event);
        }


        protected function myTree_OnDragEnter(event:DragEvent):void
        {
            //Allows the drag to be accepted.
            DragManager.acceptDragDrop(event.currentTarget as UIComponent);

            //Shows copy sign.
            DragManager.showFeedback(DragManager.COPY);

            //Shows the target area it will drop.
            myTree.showDropFeedback(event);
        }


        protected function myTree_OnDragExit(event:DragEvent):void
        {
            //Stop showing the target line
            myTree.hideDropFeedback(event);
        }


        protected function myTree_OnDragOver(event:DragEvent):void
        {
            //Shows the target line it will drop at.... or update its
position.
            myTree.showDropFeedback(event);
        }



        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"
gap="0" />
    </s:layout>


    <mx:Tree id="myTree" width="50%" labelField="@label" showRoot="false"
dataProvider="{xmllcTreeTestData}"
             dragDrop="myTree_OnDragDrop(event);"
             dragEnter="myTree_OnDragEnter(event);"
             dragExit="myTree_OnDragExit(event);"
             dragOver="myTree_OnDragOver(event);" />

    <s:DataGrid dataProvider="{acDataGridTestData}" width="600"
dragEnabled="true" />

</s:Application>



-Mark




On Thu, Dec 26, 2013 at 7:51 AM, Deepak MS <me...@gmail.com> wrote:

> Hello,
> I'm trying to implement drag-drop between datagrid and tree. I need to
> simply drag and drop single or multiple datagrid items in a tree node.
> Looks like just enabling dragEnabled, dropEnabled and dragMoveEnabled
> doesn't work. And hence I added dragEnter, dragOver and dragDrop event
> handlers on Tree.
>
> When dragOver  or dragDrop event gets triggered, how do I know on which
> node is the dragged item hovering over? I did not get any source in my
> dragOver's or dragDrop's DragEvent.
>
> Any way how to go about it?
>
> Screenshots for reference:
> http://snag.gy/MSx7S.jpg
> http://snag.gy/meLwE.jpg
>