[Solved] Clientside drag & drop and Serverside synchronization

[Christian]

Hi,
I have a Tree using clientside drag and drop and load on demand with webservice.
How can I update the Tree-Structure on the Serverside with calling a webmethod at the end of the client-event onNodeDropping?

Example:

function onNodeDropping(sender, eventArgs)

{

var destinationNode = eventArgs.get_destNode();

if(destinationNode)

{

var sourceNodes = eventArgs.get_sourceNodes();

var firstTreeView = sourceNodes[0].get_treeView();

var secondTreeView = destinationNode.get_treeView();

var firstTreeViewID= sourceNodes[0].get_treeView().get_id();

var secondTreeViewID = destinationNode.get_treeView().get_id();

firstTreeView.trackChanges();

secondTreeView.trackChanges();

var type = "over";

for (var i = 0; i < sourceNodes.length; i++)

{

var sourceNode = sourceNodes[i];

//sourceNode.get_parent().get_nodes().remove(sourceNode);

if(eventArgs.get_dropPosition() == "over")

{

destinationNode.get_nodes().add(sourceNode);

}

if(eventArgs.get_dropPosition() == "above")

{

insertBefore(destinationNode, sourceNode);

type = "above";

}

if(eventArgs.get_dropPosition() == "below")

{

insertAfter(destinationNode, sourceNode);

type = "below";

}

}

destinationNode.set_expanded(true);

firstTreeView.commitChanges();

secondTreeView.commitChanges();

// Save State Serverside

WebInterface._webServices.MainAjaxServices.InsertNodes(eventArgs, "type", null, null);

}

}

and Serverside:

[WebMethod( EnableSession = true )]
        [ScriptMethod]
        public void InsertNodes( RadTreeNodeDragDropEventArgs NodeEvent, string type )
        {
            // Update the Tree-XMl Serverside
        }

Is it possible to get the clientside Eventargs to Serverside?

Thank you very much
Christian

[Dimitar Milushev]

Hello Christian,

You can only pass strings to WebMethods called from Javascript. You will have to devise your own system for sending the needed info as a string. For example, you can send the values of the dragged node and the destination node and then use the FindNodeByValue method to find them on the server.

You can read more at http://msdn.microsoft.com/msdnmag/issues/07/01/ExtremeASPNET/default.aspx

Regards,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Christian]

Thank you for the fast reply. I got it working now, passing the nodeIds to the Webservice and editing the Tree-Xml. This works perfect.

But now I have a new Problem. How can i copy the Nodes? If i drag and drop the node from one tree to the other, the node is always moved to the target-tree. What i want is a clone of the selected node (and subtree) to the target-tree.

I couldn't find an example in your help.

Thanks
Christian

[Nikolay]

Hi Christian,

This behavior is due to the fact that the add method actually removes the node from the source treeview. I suggest that you refer to the following KB article as it shows a similar approach to the one you are up to:

How to copy or move TreeNodes depending on the CTRL key


Hope this helps.

Regards,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Christian]

Thank you,
this works very nice for one node.
When I want to copy a node with all it's subnodes i have to implement this funktionality myself or is there a method like copy- or cloneNode?

Regards,
Christian

[Nikolay]

Hi Christian,

There is a Clone method at the server side. You can use the NodeDrop event to clone the source node and add it to the destination node. You can pass the value of the isCtrl variable from the OnClientNodeDropping event to the server NodeDrop event by setting this value as a custom attribute to the source node, like:

<script>
            var isCtrl = false;
            document.onkeydown = function(e)
            {
                if(!e) e=window.event;
                if(e.keyCode == 17)
                    isCtrl = true;

            }
            document.onkeyup = function(e)
            {
                if(!e) e=window.event;
                if(e.keyCode == 17)
                   isCtrl = false;
            }
            function OnClientNodeDropping(sender, args)
            {
                var sourceNode = args.get_sourceNode();
                var destNode = args.get_destNode();

                if(destNode)
                {
                    sender.trackChanges();
                    if(!isCtrl)
                    {
                        sourceNode.get_attributes().setAttribute("isCtrl", "no");
                    }
                    else
                    {
                        sourceNode.get_attributes().setAttribute("isCtrl", "yes");
                    }

                    sender.commitChanges();
                }
            }
        </script>

Then, in the server-side NodeDrop event handler, you can do the following:

protected void RadTreeView1_NodeDrop(object sender, Telerik.Web.UI.RadTreeNodeDragDropEventArgs e)
    {
        RadTreeNode sourceNode = e.SourceDragNode;
        RadTreeNode destNode = e.DestDragNode;
        if (destNode != null)
        {
            if (sourceNode.Attributes["isCtrl"] == "no")
            {
                RadTreeNode newNode = sourceNode.Clone();
                destNode.Nodes.Add(newNode);
            }
            else
            {
                sourceNode.Owner.Nodes.Remove(sourceNode);
                destNode.Nodes.Add(sourceNode);
            }
            destNode.Expanded = true;
        }
    }

Attached, please find a small and running project on the matter.

Download the files and give them a go.

Hope this helps.

Sincerely yours,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center