ASTreeView – PostBack After Drag and Drop

by Weijie JIN on

A lot of people ask how to do a post back and save the drag and drop node to db after user’s drag and drop action. Here are the steps:

1. Add two textboxes to the page to hold the node values and a server side button to trigger the PostBack, wrap with a hidden div:

<div style="display:none">
	<asp:TextBox ID="txtCurrentNode" runat="server"></asp:TextBox>
	<asp:TextBox ID="txtNewParentNode" runat="server"></asp:TextBox>
	<asp:Button ID="btnPostBackTrigger" runat="server" 
								onclick="btnPostBackTrigger_Click" />
 </div>

2. Set the OnNodeDragAndDropCompletedScript (here I am using version 1.5.8, if you are using an older version, the property is OnNodeDragAndropCompleteScript. You can either upgrade to the latest version or change the property yourself.) property

OnNodeDragAndDropCompletedScript="dndCompletedHandler( elem, newParent )"

3. Write the dndCompletedHandler function in javascript:

//parameter must be "elem" and "newParent"
function dndCompletedHandler(elem, newParent) {
	var curNodeValue = elem.getAttribute("treeNodeValue");
	var newParentValue = newParent.getAttribute("treeNodeValue");

	//set to the hidden fields
	document.getElementById('<%=txtCurrentNode.ClientID %>').value = curNodeValue;
	document.getElementById('<%=txtNewParentNode.ClientID %>').value = newParentValue;

	//trigger the PostBack
	document.getElementById('<%=btnPostBackTrigger.ClientID %>').click();
}

4. Handler actions in the event handler method of the btnPostBackTrigger:

protected void btnPostBackTrigger_Click( object sender, EventArgs e )
{
	string curNodeValue = this.txtCurrentNode.Text;
	string newParentValue = this.txtNewParentNode.Text;

	//save to the db
}

5. In debug mode, we can see:

image

That’s it, hope it can help. :)

  • alva

    This is great if I am moving an item from one parent to another. However, what if the item is only moving within a parent? How do I determine it’s position in the parent?

    Thanks!

  • Paul Treston

    This is great and will solve my issue with allowing me to execute server side code when elements of the tree are moved about.

  • http://jinweijie.myopenid.com/ jinweijie

    Hello @alva,

    You can iterate the children of the parent, then got the position of the current node.

    Weijie

  • Msharma

    hi,
    This is good.
    But I have one more issue that when from tree1 I drag item and drop into tree2 ,dragged item is removed from tree1 but I want to stop this.
    Drag n Drop should continue but item should not be deleted…Please let me know about this.

    thanks

  • http://jinweijie.myopenid.com/ jinweijie

    hello Msharma ,

    Currently, this is not possbile.

  • Srini

    Hi, your control is simply superb. Thanks much for your efforts. I have a question to you. When I drag an item from inner node to root node, some times I am getting null value in newParent.getAttribute(“treeNodeValue”), so my logic to persist that data to db is not working. Can you please let me know why this is happening? Also please provide me the code of how to cancel the drag N drop event in case of error?

    once again thanks a lot for your efforts.

  • MSharma

    hi,
    Thanks for your quick reply.
    I will be thankful if you could reply one more question that
    I search a node in tree and now i want to add a new node using java script ?
    i.e. How can we add node in tree control using java script…?

    Thanks

  • http://jinweijie.myopenid.com/ jinweijie

    Hello MSharma,

    I’ve answered you question on code project.

    Please submit to Mantis if you have more question and please consider the Priority Support if you want to get quicker answer. http://www.astreeview.com/astreeviewdemo/Support.aspx

    Thanks.

    Weijie

  • http://jinweijie.myopenid.com/ jinweijie

    Hi, please go to the support page to find how to submit request. Thank you very much.

    http://www.astreeview.com/astreeviewdemo/Support.aspx

    Weijie

  • mahavir

    Hi,

    I am trying out something to have some hands on astreview

    I have two astreeviews on my page.

    I want to keep the node in first tree and a copy in second when i drag from 1st to 2nd. So i need to refresh the trees (to populate the data from database) once i drag and drop.

    When i was not using dynamic loading, it was working fine. But now i am trying dynamic loading and initial page load with parent node displayed and then node expansions are working fine with the way for dynamic loading (using render method) you suggested in your post ob code project.

    But drag and drop from 1 tree to another is not working as expected. I want the expanded state remain as it after drop. Which earlier i used to to do with save state and resore state options. But now, as my entire tree is not loaded, the save and restore state features do not apply correctly.
    the trees are either getting collapsed completely or the page is giving parse error as below.

    “Message: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
    Details: Error parsing near ‘<li id="t_l_57" che'.
    Line: 5
    Char: 62099
    Code: 0"

    Please suggest how to make it work.

    Thanks in advance.

  • Zin

    save my time. :) thanks you

  • Sergio Aranda

    jinweijie, Thank you!!! AsTreeView now is working in my Project. :-)

  • mstis

    Thanks! Great work!

Previous post:

Next post: