Hi all,
i have used WebTree control in my page and have some problems in drag and drop functionality.
For Ex: Root node is "Navigation".
Parent node is "Folder1".
child nodes for Folder1 are "ChildNode1, ChildNode2 and ChildNode3".
drag and drop functionality is working in between the parent nodes.
but its not working when i am dragging the ChildNode1 and dropping this into ChildNode3(its not working in between the child nodes).
Can anyone help me out?
Hello,
I am trying to reproduce the problem, unfortunately to no avail. For example, if you go to this drag and drop online sample, you can see that the same scenario is depicated there and it is working fine (sibling over sibling works fine).
Is there something else that we might be missing?
Hi,
I have worked online sample but its not working correctly. My problem is when i drag the parent1 node to drop any other parent node,the parent1 node childs are deleted.But ,i need to drag the parent node with their child nodes to drop any other nodes.
For ex,
Parent1 node is P1.Its child nodes are c1, c2 and c3.And another Parent node is P2.If i drag the node P1 and drop it into another Parent node P2 means the Parent Node P1 only dropped its child nodes c1,c2 & c3 are deleted. I need to drag and drop Parent node P1 with their child nodes c1,c2 & c3.
Can any one help me.
I have the same problem. Please do help.
I don't think you can drag a node and its children using JavaScript on the front end.
I ended up changing the xNode.ParentNode in my back end database and redrawing the tree. That was not a slow solution for me, and it seemed far more reliable than traversing the TreeVeiw nodes and reassigning the ParentNode property while simultaneously adjusting the back end database.
I did the following to achieve drag an drop with children.
if(!destinationNode.isChildOf(draggedNode) && !draggedNode.isChildOf(destinationNode)) { AddChildNodesRecursive(draggedNode, destinationNode); if(draggedNode) draggedNode.remove(); } __doPostBack('<%=hdnDropNode.ClientID%>','omserverchange'); //location.reload(true);
Here, i am sending __doPostBack using a hidden field's on serverchange event, so that immediately the DB is updated
=====================================================================
Following method is a recursive method to get the dragged children
function AddChildNodesRecursive(childNode, parentNode) { var newChild = parentNode.addChild(childNode.getText()); //If DemandOnLoad had already had happened then it work for the draged node if (childNode.hasChildren()) { var children = childNode.getChildNodes(); for (c in children) { var childSubNode = children[ c ]; AddChildNodesRecursive(childSubNode, newChild); } } else { newChild.setExpanded(false); } }
Here is the server side method to update the DB
protected void ubtDataTree_OnDropServerChange(object sender, System.EventArgs e) {
//Update the Database here for
UpdateDBOnDrag(hdnDragNode.Value, hdnDropNode.Value);
//This is not the best way to acieve, but for the moment we are going to use it //Redirecting to itself so that page can be loaded from scratch Response.Redirect("TestWithActualDB.aspx"); }
Here i am redirecting to itself, since it has to do the Post back, as we need a post back to get the updated changes. this is not the "Required and Best" method, pleae concentrate on the quoted line. but to achieve but i am doing i used this for the time being.
BOGHRD: Can you please let me know the best way to achive this
Following is the UpdateDBOnDrag method command
command.CommandText = "UPDATE UltraTreeDB Set ParentID=" + Convert.ToInt32(destNodeID) + " WHERE ID=" + Convert.ToInt32(sourceNodeID);
command.ExecuteNonQuery();