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(…).
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).
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.
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.
TreeNode t = new TreeNode(“Parent1”);
//Do what ever you want with the string being passed;
- 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.
- 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.
- 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.
- 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.