This Question is Answered

14 "helpful" answers available (3 pts)
6 Replies Last post: May 9, 2008 4:16 PM by Kamal

how to drag and drop a in Tree control?

May 8, 2008 3:43 AM

Click to view RajivGu's profile Level 4 RajivGu 49 posts since
Apr 2, 2008

Hi,

I want to create a tree control where i should be able to drag and drop one node over other.

After droping the node over tagrget node the dropped node should be appended to the target node

and dragee node should be cleared from the tree conrtrol from previous location.

Any Suggestion will be helpful ..

Thanks

Rajiv

Click to view Kamal's profile Curl Kamal 120 posts since
Oct 17, 2007
1. Re: how to drag and drop a in Tree control? May 8, 2008 6:42 AM
Here is an example. Note that I have subclassed TreeNode for draggable nodes that can be dragged, but not for the Nodes where you can drop (like the "Vegetables I Like" node. The code below should be used just as an idea to extend on).





 {curl 6.0 applet}
{curl-file-attributes character-encoding = "windows-latin-1"}

{define-class package TreeNodeDataFrame {inherits Frame}
  field constant public tree-node:DragableTreeNode

  {constructor package {default tree-node:DragableTreeNode, node-data:any}
    set self.tree-node = tree-node
    {construct-super
        dragee = {ImageDragee drag-graphic = {Frame color = "black", node-data}},
        node-data
    }
  }
}

{define-class package DragableTreeNode {inherits DefaultTreeNode}
  field private data-frame:TreeNodeDataFrame 
  field constant public original-node-data:any

  {constructor package {default
                           node-data:any = null,
                           ...
                       }
    set self.original-node-data = node-data

    set self.data-frame = {TreeNodeDataFrame self, node-data}

    {construct-super
        node-data = self.data-frame,
        ...
    }
  }
}

{def target-tree-node =
    {TreeNode
        node-data =
            {Frame
                "Vegetables I Like",
                {on e:DragOver do
                    {e.will-accept-drop?
                        {proc
                            {type:Type, x:Distance, y:Distance, 
                             effect:#DragEffect
                            }:DragEffect

                            {if {type.subtype-of? TreeNodeDataFrame} then
                                {return drag-effect-move}
                             else
                                {return drag-effect-none}
                            }                                            
                        }
                    }
                },
                {on e:Drop do
                    {e.accept-drop
                        {proc
                            {a:any,
                             x:Distance,
                             y:Distance,
                             effect:#DragEffect
                            }:DropResult
                            {return
                                {DropResultCopy
                                    action =
                                        {proc {}:void
                                            {type-switch a
                                             case data-frame:TreeNodeDataFrame do
                                                {target-tree-node.append data-frame.tree-node}                                            
                                            }

                                        } 
                                } 
                            } 
                        } 
                    } 
                }
            },

        {TreeNode node-data="Potato"}
    }
}

{TreeControl
    data-model =
        {TreeModel
            root = 
                {TreeNode node-data="Food",
                    {TreeNode node-data = "Vegetables",
                        {DragableTreeNode node-data ="Squash"},
                        {DragableTreeNode node-data="Tomatoes"},
                        {DragableTreeNode node-data="Cucumbers"}
                    },
                    target-tree-node
                }
        }
}


 


Click to view Kamal's profile Curl Kamal 120 posts since
Oct 17, 2007
2. Re: how to drag and drop a in Tree control? May 8, 2008 6:49 AM

Note hat the VLE uses Tree Layout to do what yoy are askingf for. You can open a VLE project and add some stuff and play with the Tree Layout by dragging a node and dropping it. If you have the IDE installed in your system, the VLE code is already in your machine. You can look at the Tree control implementation there and get further ideas.
Click to view RajivGu's profile Level 4 RajivGu 49 posts since
Apr 2, 2008
3. Re: how to drag and drop a in Tree control? May 8, 2008 7:24 AM
in response to: Kamal

Thanks Kamal ..

Thanks for your valuable help and Suggestion...:)

I think the rest of the path of creation of tree will be easier for me..


Click to view Kamal's profile Curl Kamal 120 posts since
Oct 17, 2007
4. Re: how to drag and drop a in Tree control? May 9, 2008 7:53 AM
in response to: Kamal
Bert correctly pointed out that the Tree used in the VLE's "Tree Layout" tab is not a TreeControl. It uses a custom Tree as there was no TreeControl when this was implemented.
Click to view mgordon's profile Curl mgordon 37 posts since
Oct 17, 2007
5. Re: how to drag and drop a in Tree control? May 9, 2008 12:10 PM
I put up a more complete example of a TreeControl. This is a customized TreeControl that supports data binding and rearranging the nodes by drag and drop. The value of the control is represented as a JSON string.

The test applet shows the tree at the left and a TextArea at the right. Both are bound to the "data" field of the same RecordSet, so editing either one will affect the other one. As you drag nodes around in the tree, you'll see the string value change in the TextArea. If you edit in the TextArea (tab away to "finish" the edit), the tree will be updated to match. If you create bad JSON, it will throw an exception, of course, so do something simple like changing a + to a -! Also note that as you step through the records in the RecordSet (using the controls at the bottom), the tree will reflect the current record.

When you drop a node, the JsonTreeItem.move method is invoked. This rearranges the nodes as appropriate and updates the data value. This causes the control to rebuild the UI as needed. I'm using some special BorderSpecs to show where the drop will take place.

There can be improved but it is a good start. One thing I haven't done yet is to recognize when the item is dropped at some amount of indent. In that case, the dropped node should go in as a child node.
Click to view Kamal's profile Curl Kamal 120 posts since
Oct 17, 2007
6. Re: how to drag and drop a in Tree control? May 9, 2008 4:16 PM
in response to: mgordon

Nice example Mike. Note that if you are running this example in Curl 6.0, then you will need to make a small change in the manifest.scurl file. You will need to change


{curl 7.0 manifest}


with


{curl 6.0, 7.0 manifest}