TreeView in any web page. You can find that article here. This article is intended to build on that solution by providing a server side equivalent control, and to give a gentle introduction to AJAX.
While the code presented here is developed in a type-safe manner using Generics from .NET Framework 2.0, it can be easily ported back to 1.1 by using an
ArrayList instead of
List<> in Tree.cs. The code for .NET 1.1 has also been included.
AJAX is a technique for progressively building web content, most notably used for:
- Building pages progressively (the technique used here).
- Making server requests, for example, for real-time validation.
In this example, a tree is built progressively by downloading children of a node when they are required, i.e., the user has expanded that portion of the tree.
Build the Tree
Fundamentally, we need to track the contents of the tree, and that contents need to exist within the session, and be available when a new portion of the tree is requested. To do this, we build a hierarchy in memory of tree nodes. Rather than reproducing the tree code here I have shown a simple recursive method that progressively builds up a big tree.
protected void BuildTree(int depth, TreeNode node)
if (depth > 4)
for (int i=0; i<10; i++)
node.Children.Add(new TreeNode("Node " + depth + i, "",
foreach (TreeNode child in node.Children)
BuildTree(depth + 1, child);
This will build a tree of 11110 nodes, a tree 4 levels deep, with 10 nodes below each other node.
For your interest, downloading a tree of this size results in HTML that is around 9 MB in size, not something you would ask your user to download!
Each node in the tree has a similar structure as follows, making use of tables:
|plus/minus image||open icon||closed icon||text/link/etc.|
|div (empty initially) to hold child nodes|
Some things to note:
- Both open and closed images are included but one is visible depending upon the expanded state.
- The text in this example is a link, but you could generate any content.
This code performs the following actions:
- Find the
DIV to place the children into, based on the ID passed in (item). This is a unique ID for the
TreeNode that is being expanded.
- Create an object to make an HTTP request with.
- Submit the request to a specific URL, namely "TreeFill.aspx?tree=&id=".
- Place the received HTML into the
DIV that holds the children.
- Toggle the node to show the child
function DelayLoadNode(treeid, item)
var div=document.getElementById("D" + item);
var xmlhttp = GetXMLHttp();
if (div.innerHTML == "")
div.innerHTML = xmlhttp.responseText;
Filling out the Tree
When the AJAX call comes in, the TreeFill.aspx page answers the call by finding the node being expanded, and returning the HTML for its children. There is no magic here, just trawl through the tree structure on the server until we find the right node, and render its children in the response.
In order to do this, we need the tree itself on the server side. This is located by pulling the tree structure out of the session based on the ID of the tree that we are expanding. The Tree structure was placed into the
Session using the
treeID when the tree was first rendered.
OutputTreeNode() does a brute force search, but a more elegant search algorithm could easily be applied.
The basic steps for proper operation of the tree are:
- Build a tree in memory and pass it to the
- Store the tree in memory so that TreeFill can find it.
- Send the
Root node to the browser, including smarts to download children.
User expands a node in the tree
- Request the children by asking for a node from a specific tree.
- Respond with the HTML from the child nodes.
- Populate the
DIV below the node with the content for the children.
- Expand the node by showing the
Thanks again to D. D. de Kerf for the original inspiration!
Note: This code is supplied "as is" without any form of warranty. Rewritten software shall not be liable for any loss or damage to person or property as a result of using this code. Use this code at your own risk! You are licensed to use this code free of charge for commercial or non-commercial use providing you do not remove the copyright notice or disclaimer from the comment section in the code.
(Source is included for both .NET 1.1 and 2.0).