ASTreeView – How to do PostBack with dynamic loading

by Weijie JIN on

I received several emails with questions about how to postback by clicking the nodes while the ASTreeView is using dynamic loading.

Because the dynamic loading, we cannot use the way in sample 2. That’s due to the nodes are generated on the fly, so the server side does not know the events binding to the node. That’s why we need another workaround to achieve postback.

In fact the sample is included in sample 5 in the package, but in order to be more clear, here I list all the steps to implement the requirement.

To summary the mechanism first,  I’ll call a javascript function while the end user clicking the treenode, then I use javascript to save the current selected value to a hidden text meanwhile use a hidden button to trigger postback. Finally, on the server side, I can get the selected node.

Here’s the steps:

1. Config in ASTreeView:

<ct:ASTreeView ID="astvMyTree" 
	runat="server"
	BasePath="~/Javascript/astreeview/"
	DataTableRootNodeValue="0"
	EnableRoot="false" 
	EnableNodeSelection="true" 
	EnableCheckbox="true" 
	EnableDragDrop="false" 
	EnableTreeLines="true"
	EnableNodeIcon="true"
	EnableCustomizedNodeIcon="false"
	EnableContextMenu="true"
	EnableDebugMode="false" 
	EnableAjaxOnEditDelete="true"
	AddNodeProvider="~/ASTreeViewDemo/ASTreeViewDemo5.aspx"
	AdditionalAddRequestParameters="{'t2':'ajaxAdd'}"
	EditNodeProvider="~/ASTreeViewDemo/ASTreeViewRenameNodeHandler.aspx"
	DeleteNodeProvider="~/ASTreeViewDemo/ASTreeViewDeleteNodeProvider.aspx"
	LoadNodesProvider="~/ASTreeViewDemo/ASTreeViewDemo5.aspx"
	AdditionalLoadNodesRequestParameters="{'t1':'ajaxLoad'}"
	OnNodeSelectedScript="nodeSelectHandler(elem);"
	OnNodeCheckedScript="nodeCheckHandler(elem);"/>

The two important configurations:

LoadNodesProvider, which is used for dynamic loading.

OnNodeSelectedScript, which is to execute javascript while clicking the node.

2. The javascript function nodeSelectHandler(elem):

function nodeSelectHandler(elem){
	
	document.getElementById('<%=this.txtSelectedNode.ClientID%>').value 
		= elem.parentNode.getAttribute("treeNodeValue");
	document.getElementById('<%=this.btnSelectionPBTrigger.ClientID%>').click();
	
}

in the javascript function, I trigger the click event of a server side button.

3. Here’s the server side button in ASPX:

<div style="display:none;">
	<asp:Button ID="btnSelectionPBTrigger" runat="server" OnClick="btnSelectionPBTrigger_Click" />
	<asp:TextBox ID="txtSelectedNode" runat="server"></asp:TextBox>
</div>

4. In the code behind, the button click handler:

protected void btnSelectionPBTrigger_Click( object sender, EventArgs e )
{
	this.divConsole.InnerHtml += 
		( string.Format( ">>Selected node: {0}<br />", this.txtSelectedNode.Text ) );
}

By the code above, the postback will be raised by clicking the dynamic loaded nodes.

For more detail, please refer the sample 5 in the ASTreeView package.

Please leave your message if you have any question, thank you:)

  • shangguan

    您好,如果有根节点,怎么来改变这个Root这个字符。下拉框控件能不能空上一行,用来用户可以进行全部的一个选择,thanks!

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

    有个roottext属性的

  • chin

    Error: JSMIN unterminated string literal: 10

    This error may cause by what reason? I am lost..
    Thanks

  • chin

    i have done the ajax loading part and set the enablethreestatecheckbox as true
    and when i checked the parent node, without expand it and click the save button,
    only the checked parent node value will be stored while the child of the node does not. (because i didn’t expand the parent and load the child)
    how can i solve this problem as i wish to store the child value as well when i check on a parent node.
    thanks.

Previous post:

Next post: