ASP.NET Treeview Node Expand-Collapse with Node click: Client Side Javascript

Dear Reader,

I had to implement a custom client side node click along with Tree expand and collapse feature working. There was no straight solution to implement ASP.NET Treeview expand and collapse in pure Javascript or JQuery directly.

With googling for almost half of the day, it turned out noting. So i began to look at the html which gets rendered by Treeview and noticed that it uses TreeView’s own client side script called TreeView_ToggleNode(…).

Method 1:

But hooking onclick for the treeview shall override this JS call when user clicks on the expander node, because the browser shall invoke custom JS script which is hooked. To over come this problem, i had to write below JS code with some validation logic to invoke TreeView’s JS script for toggling treenode (Expand/Collapse).

MyTree.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function OnNodeClicked(event) {
	if (event.target.id == "" && event.target.tagName == "IMG") {
		var parentId = event.target.parentElement.id;

		if (parentId.charAt(parentId.length - 1) == 'i')
			alert("node image is clicked");
		else {
			var nodeIndex = parentId.charAt(parentId.length - 1);
			var childNodesArg = parentId + "Nodes";

			//var func = window["TreeView_ToggleNode"];
			TreeView_ToggleNode(TreeView1_Data, nodeIndex, document.getElementById(parentId), ' ', document.getElementById(childNodesArg));
		}
	} else alert(event.target.id + " is clicked with name = " + $(event.target.id).text());


	return false;
}

MyTreeView.aspx:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TreeView runat="server" ID="TreeView1" SelectedNodeStyle="Blue" EnableClientScript="True"></asp:TreeView>
    
    </div>
    </form>
</body>
</html>

<script src="MyTree.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
        $("#TreeView1").on('click', this, OnNodeClicked);
</script>

As you can see from the above JS code, i am invoking the TreeView’s JS function for enabling toggling feature at line 12. This script is supplied by Microsoft TreeView control along with HTML on page load if EnableClientScript is enabled.

The code is self-explanatory i spose.

EDIT:
Method 2:

There are numerous ways in JS one can solve this problem, one way is above mentioned. However, thanks to my dear colleague who came up with this idea, which actually is simple yet nice solution.

Rather than using Jquery and attaching click event for the whole tree purely on the client side as done above, we could override the default href of treenodes from server side itself.

TreeView.aspx.cs:

TreeNode t = new TreeNode(“Parent1″);
t.NavigateUrl = “javascript:OnTreeNodeClicked(“Parent1″);

TreeView.js:

function OnTreeNodeClicked(treenode){
//Do what ever you want with the string being passed;
}

Pros:

Method 1:

  • This style gives more control at the client side.
  • Server side code can just purely concentrate on getting the data and not control how client should behave with the tree data.

Method 2:

  • The Server gets more control on how client should behave with the actions on tree.
  • Less JS validation code needed.
  • No need to care about toggling functionality. Its automatically taken care off.

Cons:

Method 1:

  • The JS code gets a lil bit more messy to validate as seen above.
  • Explicitly need to invoke toggling API of ASP.NET TreeView JS script to make expand-collapse work.

Method 2:

  • The Client side JS code does not get which treenode is clicked by the user.
  • Client JS file has to sync with the data format sent by the server, any changes done at server about the way data is being sent, then JS script needs to be updated accordingly. Thus a bit of tight binding.

Thanks,
Zen :)

About these ads

3 comments

  1. Srikanth Vadlakonda · April 23, 2014

    Thanks for the post. Do you have any example online or example project?

    • Zenwalker · April 23, 2014

      Sorry nope, The source code included is the example i was working on. Just copy and paste that in respective files of in your solution.

  2. Pingback: Web Email Client Asp.net | Technology Documents

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s