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
                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.