ASTreeView – How to do PostBack with dynamic loading

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:)