ASP.NET TreeView - Internet Explorer / Netscape IFrame Combination By Robbe D. Morris Printer Friendly Version

Robbe & Melisa Morris

You've no doubt seen quite a few examples of utilizing hierarchy trees in web pages.  In fact, even .NET offers a cross-browser TreeView control that does some fairly sophisticated things.  However, I've yet to find a tree that offered the flexibility and power I needed without forcing a reload of the page or relying on Page.IsPostBack including the .NET TreeView control.  It's cross-browser support was disappointing.  If you would like to see a live demo of this article prior to reading it, click here.  To download the ASP code sample, click here.

This article and subsequent code example will provide one way of utilizing a JavaScript tree and IFRAME methodology that can deliver amazing results.  Internet Explorer 5.0 + and Netscape 6.2.2 are supported.  With this methodology, the user can select a tree node and be shown it's corresponding page in the IFRAME.  Thus, eliminating the need to refresh the tree with each node selection.

At this time, I like to recognize a German author for his work in creating the JavaScript to recreate the tree.  While his example didn't cover the complexities of utilizing the tree in a real world application or provide methods for navagating around the tree, the concept of regenerating the tree in a DIV tag was created by him.  I had considered rewriting the tree generation code but his code was just to elegant not to share with the rest of the world.  At the time of this writing, I could no longer locate the original site where his code was displayed several months ago.  As soon as I can determine the author's correct name, I'll update this article accordingly.

How does it work?

The premise is really quite simple.  Rather than create complex JavaScript functions to manipulate a fixed structure of nodes, we simply repopulate the tree in a DIV tag (layer) which contains a simple HTML TABLE.  Then only show appropriate nodes when a node is selected.  This allows the user to only focus on the area of the tree they are working with.  Thus, there is normally very little to no scrolling needed.

The tree itself is constructed from an array of comma delimited values found in the default.asp page of the sample.  We'll be able to easily iterate through the array to build our tree.  Plus we can create custom JavaScript functions (like the ones in our sample) to find Next/Previous nodes.  If needed, we can also easily expand the amount of information about each node stored in the array.  This would give us a great deal of flexibility in finding or manipulating certain node types regardless of where they are in the tree.  And of course, since the tree is simply an array, it is very easy to dynamically create server side based on a wide variety of conditions.

Tree Features

1. Form validation in the IFRAME page on designated tree nodes to prevent the user from advancing to the next page.  You can see an example of this on node 1.3 and then clicking on another tree node. 2. Prevent user from clicking another tree node while a child page is loading in the IFRAME. 3. Next/Previous methods that can be triggered from the child page in the IFRAME. 4. Ability to react to tree structure changes and reload the parent page and it's tree as needed. 5. Unlimited number of nodes and child nodes.  I've had trees as large as a 500 nodes work very well. 6. Different font sizes and colors depending on depth of the selected node in the tree. 7. Hide/Show tree location ids.

About the code sample

1. default.asp This page contains the array for the tree itself.  It will serve as the parent page for the IFRAME child pages.  Take careful note of the following required hidden fields at the bottom of the page.  They are used to allow the child IFRAME pages to communicate with this page in a variety of situations: ParentReload (flag to instruct the default.asp page to reload to a specific tree id because the structure of the tree has changed), ParentReloadTreeID (if applicable-reload tree id), ChildLoaded (flag to prevent user from going to the next node until the IFRAME page has finished loading. 2. p100???.asp and p200???.asp These are IFRAME test pages used for this example.  Take notice of the required hidden fields at the bottom of the page.  They are used by the parent default.asp page in a variety of situations: NextURL (URL the child page should redirect/transfer to after the IFRAME page has posted back to itself), CurTreeID (Current Tree ID that is used as a marker for our tree selection functions).  DirtyFlag while not required, is a good way to prevent database saves unless one of the values has changed.  This will greatly reduce the number of unneeded database transactions. 3. tree.js All tree oriented JavaScript functions are housed in this file.  I've added comments to many of the functions to better explain what they do and how they work.

Another link that may be useful to you is XmlDocument Caching / SQL Server nText Speed Enhancement.  It goes into great detail regarding ways to improve your page load times in ASP.NET apps using the Tree/IFRAME methodology discussed in this article.

	Robbe has been a Microsoft MVP in C# since 2004.  He is also the co-founder of EggHeadCafe which provides .NET articles, book reviews, software reviews, and software download and purchase advice.