8 Replies Latest reply on Sep 18, 2006 4:48 PM by amers

    DataGrid to Tree

    arkcto Level 1
      I've asked this question sometime before ..

      I am able to drag items from Tree to Tree,
      and from DataGrid to DataGrid,

      but I'm unable to drag items from DataGrid to Tree.

      Any suggestions ?

      Thank you.
        • 1. Re: DataGrid to Tree
          ntsiii Level 3
          Post a small, runnable example, we'll take a look.

          • 2. Re: DataGrid to Tree
            arkcto Level 1
            Hi ntsii,

            Thanks for offering to take a look at the program.

            The application consists of only one file - an mxml file. The application has a datagrid on the leftside, and a tree on the right side, and a textarea with messages that tell you what's going on.

            Currently, I am able to drag items from the grid to the tree, but am unable to drop them into the tree. Here is the runnable code.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

            import mx.events.DragEvent;
            import mx.managers.*;

            private function enterInTree():void {
            mainTxt.text = "Enter in Tree";

            private function dropInTree(event:Event):void {
            var tree:Tree = Tree(event.currentTarget);
            mainTxt.text = "Drop in Tree";

            <!-- data for the datagrid -->
            <mx:XMLList id="containers">
            <id>1st container</id>
            <id>2nd container</id>
            <id>3rd container</id>

            <!-- data for tree -->
            <mx:XMLList id="treeData">
            <node label="Site">
            <node label="Building 1 ">
            <node label="Room">
            <node label="Cabinets">
            <node label="Drawers"/>

            <mx:Panel title="Tree Control Example" height="75%" width="75%"
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
            <mx:HDividedBox width="100%" height="100%">
            <mx:VDividedBox width="100%" height="100%">
            <mx:DataGrid id="dg2" width="30%" height="40%" dragEnabled="true"
            <mx:DataGridColumn dataField="id" headerText="ContainerIds"/>
            <!-- The tree structure and the event handlers -->
            <mx:Tree id="myTree" width="90%" height="90%" labelField="@label" dropEnabled="true"
            showRoot="false" dragEnter="enterInTree()" dragDrop="dropInTree(event)" dataProvider="{treeData}"/>

            <mx:TextArea id = "mainTxt" width="30%"/>

            Thank you.
            • 3. Re: DataGrid to Tree
              inlineblue Level 1
              The built-in capabilities do not allow dragging between Tree and DataGrid. You have to write your own drag/drop routines to do that.
              • 4. Re: DataGrid to Tree
                amers Level 1
                Hmm, you mean you can't use the dragDrop functions and whatnot?

                I'm trying to drag from Tree to Datagrid. It doesn't seem to make any sense that it would not work.
                • 5. Re: DataGrid to Tree
                  inlineblue Level 1
                  I'm not saying it's impossible to drag and drop between a Tree and DataGrid, just that you have to do it yourself. That is, use the DragManager and associated events (dragEnter, dragOver, etc.) to implement your own drag/drop functionality.
                  • 6. Re: DataGrid to Tree
                    amers Level 1
                    Ahh, I see. Then, it's the same as dragging something to an Image or whatnot. I believe this should work with the same code.

                    We'll see! - thanks!
                    • 7. Re: DataGrid to Tree
                      Flex harUI Adobe Employee
                      DataGrid expects linear data, the Tree expects hierarchical data so there is no default compatibilty between the data, therefore, drag/drop is not allowed. You will have to override the default behavior.
                      • 8. Re: DataGrid to Tree
                        amers Level 1
                        I've tried this:

                        private function dragEnterHandler(event:DragEvent):void {
                        // Get the drop target component from the event object.
                        var dragInitiator:DataGrid=DataGrid(event.currentTarget);


                        But, it had issues with the @id; which is what I had used for data on the Tree component.

                        I'm not sure how to reference the treeitems when dragging them into the datagrid.