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.
After Googling for almost half of the day, it turned out nothing. 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 overcome this problem, I had to write the below JS code with some validation logic to invoke TreeView’s JS script for toggling treenode (Expand/Collapse).
MyTree.js
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";
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
<body>
<form id="form1" runat="server">
runat="server" ID="TreeView1" SelectedNodeStyle="Blue" EnableClientScript="True">
</form>
</body>
</html>
src="MyTree.js" type="text/javascript">
type="text/javascript" language="javascript">
$("#TreeView1").on('click', this, OnNodeClicked);
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 suppose.
EDIT
Method 2
There are numerous ways in JS one can solve this problem, one way is mentioned above. However, thanks to my dear colleague who came up with this idea, which actually is a 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){
}
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. It's automatically taken care of.
Cons
Method 1
- The JS code gets a little 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
Filed under: ASP.NET, C#, CodeProject, Dotnet, Javascript, Jquery
Tagged: .NET, asp.net, Bing, Blog, Blogger, C#, client side script, codeproject, Dotnet, google, javascript, jquery, JS, JS script, Programming, treeview, wordpress
Submit an article or tip
