RadTreeView Drag & Drop

[Rosco]

Hi,

I am currently wanting to implement the RadTreeView drag and drop functionality. I only need to use one tree, but users must be able to modify the tree structure by dragging and dropping items into different areas of the tree. I'm not too familiar with JavaScript, so would appreciate it if someone could help me modify the JavaScript found here to implement the above scenario.

http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx

Thanks in advance,
Rosco

[Veronica]

Hi Rosco,

Thanks for your question.

I've made an example for you to show you how to use RadTreeView Drag&Drop functionality for one tree. You can see it in the attached .zip file.

Please let me know if this was helpful.

Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rosco]

Thank you so much Veronica, it was exactly what I was looking for.

Kind regards,
Rosco

[Rosco]

Hi Veronica,

I would appreciate it if you could step me through the code, so I can get a better understanding of what is going on. I'll start with the JavaScript.

onNodeDropping
Where are the get_destNode(), get_sourceNodes(), and getHtmlElement() functions defined?

        function onNodeDropping(sender, args) {
            var dest = args.get_destNode();
            if (dest) {
                dropOnTree(args);
            }
            else {
                dropOnHtmlElement(args);
            }
        }

        function dropOnTree(args) {
            var text = "";

            if (args.get_sourceNodes().length) {
                var i;
                for (i = 0; i < args.get_sourceNodes().length; i++) {
                    var node = args.get_sourceNodes()[i];
                    text = text + ', ' + node.get_text();
                }
            }
        }

        function onNodeDragging(sender, args) {
            var target = args.get_htmlElement();

            if (!target) return;

            if (target.tagName == "INPUT") {
                target.style.cursor = "hand";
            }
        }

And now the codebehind:

            RadTreeNode sourceNode = e.SourceDragNode;
            RadTreeNode destNode = e.DestDragNode;
            RadTreeViewDropPosition dropPosition = e.DropPosition;

My understanding is that the sourceNode is the node that has been selected and is being dragged and the destNode is the node that the sourceNode is being dragged onto. What does the dropPosition represent?

Thanks in advance,
Rosco

[Veronica]

Hello Rosco,

Thanks for contacting us again.

The good news is that the Q1 2010 release will provide javascript IntelliSense which will make it easier to understand what functions do. The Beta release will go live tomorrow (16/02/2010).

Another way to understand what a function does is to refer to the documentation here.

I modified the code because there are two ways to implement drag&drop functionallity - Server-Side and Client-Side.

RadTreeView1 relies on the server-side method - so it needs no JavaScript. All the functionallity is provided in Code-Behind in RadTreeView1_NodeDrop.

RadTreeView2 depends on the Client-Side method. It uses 3 javascript functions: dropOnTree() , onNodeDropping() and clientSideEdit(). Also there are 2 helper functions: insertBefore() and InsertAfter().

I'll walk you through the Javascript code:

function onNodeDropping(sender, args) {
            var dest = args.get_destNode();
            debugger;
            if (dest) {
                clientSideEdit(sender, args);
                args.set_cancel(true);
                return;
                dropOnTree(args);
            }
        }

get_destNode() retrieves a reference to the destination node, i.e. the node that is being dropped onto. In the function clientSideEdit is used  get_sourceNodes() function. It returns an array of all the nodes being dragged. It is useful when MultipleSelect is True. We iterate through the array and check the dropPosition. dropPosition is the position at which the user drops the source node(s).
There are 3 values:

- over - used when you drag and drop a node over another node

- above and below  - used when you want to drop a node between other nodes.

function clientSideEdit(sender, args) {
            var destinationNode = args.get_destNode();

            if (destinationNode) {
                var secondTreeView = $find('RadTreeView2');

                secondTreeView.trackChanges();
                var sourceNodes = args.get_sourceNodes();
                for (var i = 0; i < sourceNodes.length; i++) {
                    var sourceNode = sourceNodes[i];
                    sourceNode.get_parent().get_nodes().remove(sourceNode);

                    if (args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);
                    if (args.get_dropPosition() == "above") insertBefore(destinationNode, sourceNode);
                    if (args.get_dropPosition() == "below") insertAfter(destinationNode, sourceNode);
                }
                destinationNode.set_expanded(true);
                secondTreeView.commitChanges();
            }
        }

In the code-behing (Default.aspx.cs):

You are right about "the sourceNode is the node that has been selected and is being dragged and the destNode is the node that the sourceNode is being dragged onto."

     RadTreeNode sourceNode = e.SourceDragNode;
RadTreeNode destNode = e.DestDragNode;

RadTreeViewDropPosition dropPosition = e.DropPosition;

I've attached the new example in a zip file.

If you have further questions don't hesitate to contact us.


Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rosco]

Thanks a lot for that Veronica, it makes more sense now. I have got the tree displayed correctly, and the drag and drop functionality working as well. I've also managed to open a web page in a new window when a node is double-clicked. I need to refine this functionality though, as a different web page needs to open depending on the node clicked.

string url = "http://url.for.node1";
RadTreeNode node1 = new RadTreeNode("Node 1");
this.tree.Nodes.Add(node1);

        function DoubleClick(sender, args) {
            var source = args.get_node();
            window.open(...);
        }

My question is, how can I access the url in the code-behind from within the window.open function?

Regards,
Rosco

[Veronica]

Hi Rosco,

Thanks for your question. It is very good that you become more familiar with JavaScript. Keep up the good work!

For the current question:
get_navigateUrl() - Returns the URL of the Node(the href attribute of the link). Null if the NavigateUrl server property is not set.

Try this as a solution:
You may set the NavigateUrl property of each node so when the node is clicked the web page will be opened. My advice is to use object initializer when you write in the aspx.cs page - that way the code will be shortened (in the example below only one row):

RadTreeView1.Nodes.Add(new RadTreeNode("New node", "0", "http://google.com"));

With this you will need no JavaScript function to execute the opening of the web page.

If you have more questions -  you are welcome. Please let me know if this was helpful.

Sincerely yours,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rosco]

Yes I have tried using the NavigateUrl property, but this only works when a node is single clicked. What I want is to open a different URL (depending on the node clicked) when a node is double clicked. So, is there a way to pass a url string from the code-behind, into the client side double-click handler?

[Rosco]

Please ignore my last message. I managed to figure it out using custom attributes.

[Rosco]

Hi,

I am currently trying to configure the tree view so that it will not allow me to drop a node onto certain other nodes. I have implemented this feature by setting up rules in the drag and drop handlers, but I want to know how I can disable the highlight feature when a node is being dragged above another node, which it cannot be dropped on. I want to use this as a visual indicator that this operation is not allowed.

How can I disable the highlight feature?

[Veronica]

Hello Rosco,

Thanks for your question.

Actually there is a property for forbidding dropping on some nodes AllowDrop="false":

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1.1" AllowDrop="false">
</telerik:RadTreeNode>

When you use it - you'll see a "stop" icon appearing when you try to drop a node onto forbidden one.

Please let me know if this was helpful.

Greetings,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rosco]

Yup that's exactly what I've been looking for :)

[Hari Prasad]

Even I have similar problem. I have 2 nodes both are having the properties AllowDrop=false and AllowDrag=true, so if I drag and moved to somewhere and again i have placed it in same place, the stop icon is showing and it's not going until i select other node. and also if drop it there, the clientnode click event is firing. it should not happen for me. stop icon should go. any suggestions

Thanks in Advance
Hari.

[Plamen]

Hi Hari,

The AllowDrop=false  property is the one that force the icon to appear and since you have set it to the node it is an expected behaviour.

I tested your second observation as well and it looks that OnClientNodeclick event actually is not fired, only if you hold the mouse over a node that can be expanded while dragging , the node expands, no matter of you drop or not. That is expected as well in order to give you a chance to drop the node over some of the children.

Hope this explained the issues.


Best wishes, Plamen Zdravkov
the Telerik team

[Chandrak]

Hi,

I have RadTree and RadMultiPage controls on same page. RadPageView loads different aspx pages using contentrul property.  
Some of the RadPageViews have RadCharts and some of them have RadGrids. Now, I want drag drop functionality between RadTree and RadMultipage's individual tabs.

(1) Drag from tree and over to tab area. While doing so that tab should become active and now user should be able to drop node to either chart or grid whatever is available on the tab page.

(2) Drag from tree and drop to active tab page's graph or grid.

I need code for either of the two. First is more professional approach while in second case user first has to activate tab and then have drag-drop operation. 

In our application these tree nodes are everything and entire business logic is around them so this is very critical need.

Thanks
Chandresh

[Plamen]

Hi Chandresh,

 
Performing such Drag and Drop operations (over a RadTabStrip and another aspx page) are not supported scenarios out of the box. You can review our on-line demo where the possible drag and drop scenarios are explained.

Hope this information will be helpful.

Regards,
Plamen
the Telerik team