Developing with the Treeview Web Control Part1 : The Basics

By James Avery

Have you ever wanted to create an expandable tree much like the one found at Microsoft's MSDN site, or the one found in windows explorer? If so then this article should interest you. Creating an expandable tree has been made much easier with the IE web controls for asp.net. These controls are a free download from Microsoft and provide us with a quick and easy way to present hierarchical data in an expandable tree.

One of the best things about the control treeview is its ability to serve browser specific html. If the browser is a pre IE 5.5 browser then the treeview generates html 3.2 code whereas if it is an upper-level browser, Internet Explorer 5.5 and above, then it creates rich dhtml behaviors to enhance both the esthetics and usability of the controls. This means that with older browsers, all the work will be done server-side and a post back to the server will be required when they expand or collapse a node. With upper level browsers a lot more of the work is done on the client side with dhtml, saving the user another trip back to the server. This makes the controls 100% browser compatible, but the best user experience will be had using IE 5.5 or above.

In this article we are going to cover the basics of creating a simple treeview and customizing its appearance and behavior. Our goal is to create a tree that will link to sql server and asp.net related sites.

You should have at least a basic understanding of asp.net and web forms. You will also need a system with the .net framework and the IE web controls installed. To install the IE Web controls click here.

We are going to create a simple .aspx file called treeview.aspx. The first thing we need to do is add import and register directives to the top of our page.

The import directive tells the system that we are going to be using the webcontrols namespace on our page. The register directive creates the tag mytree for us to use when we create out tree. These two directives will need to be included on any pages where you are going to be using the treeview. Now we are going to add the basic html requirements of the page and a server-side form that will hold our treeview.

Inside our server side form we are going to add our treeview using the mytree tag that we registered at the top of our page.

The two elements that we are using in the above example are treeview and treenode. The treeview element is used to start and end the complete tree structure. This is also where we are going to set a lot of our properties. The treenode element represents a node on our tree. You will notice that the first treenode contains the second treenode, this causes the second tree node to be a child node to the first node. Also notice we are using the text property of the treenode element to specify the text associated with the node. The text property can contain html and is actually the only place you can use html code inside the treeview tags. Also notice in the code above that we are using the navigateurl property to define what to do when this node is selected. When the nodes are selected the current page will change to the url that we defined.

But as you can see this treeview is not very pretty at all, so now we are going to explore some of the different stylistic properties that we can set. We are also going to add some more nodes to better represent our final tree. In this next treeview we are going to use the treenodetype element to define how our treenodes will appear. The TreeNodeType is a way of defining a type or class that nodes can inherit from.

We create two different treenodetype elements in this example; one called folder and the other called link. You can name these anything you like, the name is just used to reference them in the rest of the tree. The two properties we use are ExpandedImageUrl and ImageUrl, these simply represent the images we want displayed when the node is expanded or collapsed. We then reference our treenodetype using the ChildType property and set which treenodetype we want the children on this node or tree to use. When using multiple treenodetypes you have to think of them like cascading style sheets, where the latest setting takes precedence. To better show this we are going to use the ImageUrl property of the 4guysfromrolla node to set it to a different image than rest of the links. This property setting will take precedence over the treenodetype setting.

I still think our tree needs a little bit more style. So we are going to use three other properties that are available to use. Default Style -Sets the default style of the node when it is not selected.
HoverStyle -Sets the style of the node when the mouse is over it.
SelectedStyle - Sets the style when the node has been selected.
These properties can be set on the tree , the node , or the treenodetype. In the next example we are going to show some of each.

In the above example we are using css attributes to change the stylistic properties of our tree. We set properties on the treeview, the treenodetype, and an individual treenode and you can see the effects of each in the example. This shows off the versatility and customization available with this control.

This is the conclusion of Part 1 of developing with the treeview web control.
Please check out Part 2 for information on dynamically creating treeviews.