Using the TreeView IE Web Control

Article
06/24/2011

Scott Mitchell

July 2003

Applies to:
Microsoft ASP.NET

Summary: Learn about the TreeView Web control and how to start using it in your ASP.NET Web applications. In addition to the standard ASP.NET Web controls (like the TextBox, DropDownList, DataGrid, DataList and so on) Microsoft has released an additional set of Web controls designed to take advantage of features inherent in Internet Explorer. These new Web controls, dubbed the Internet Explorer Web Controls, or IE Web Controls for short, contain four new controls that include the TreeView Web control. (11 printed pages)

Download TreeViewControl.msi.

Introduction
Installing the IE Web Controls
Getting Started with the IE Web Controls
Getting Started with the TreeView IE Web Control
More Advanced TreeView Features
Summary

Introduction

In 2002 Microsoft® released four ASP.NET Web controls designed to provide enhanced experiences for Web visitors using Microsoft Internet Explorer. These Web controls, dubbed the Internet Explorer Web Controls, or IE Web Controls for short, consist of the following four controls:

The MultiPage Web control
The TabStrip Web control
The Toolbar Web control
The TreeView Web control

These Web controls can be used to enhance an ASP.NET Web page by providing user interface memes your Web visitors will be familiar with. For example, the Toolbar Web control displays a clickable toolbar, similar to toolbars found in assorted Microsoft Office products. The TabStrip and MultiPage Web controls can be used in conjunction to display tabbed content. Finally, the TreeView Web control displays data in a clickable, expandable tree—much like the way Microsoft Windows® Explorer displays the drives and folders in a PC's file system in a tree (you can find live demos of these Web controls online at GotDotNet: the WebControl Toolbar demo; the TabStrip/MultiPage WebControl demo; and the TreeView Sample WebControl demo).

The IE Web Controls can be used on Web servers that have either the .NET Framework version 1.0 or version 1.1 installed. While the IE Web Controls were designed to work best with Internet Explorer, these Web controls will still render in alternative browsers. However, in non-Internet Explorer browsers when users interact with the IE Web Controls, such as by expanding a node in the TreeView Web control, a postback occurs. With Internet Explorer 5.5 and up, the IE Web Controls emit DHTML code that circumvents the need for postbacks. That is, visitors to your Web site using Internet Explorer 5.5 and up will have a more enhanced user experience than those using alternative browsers; however, those who are not using IE 5.5 or up will still be able to see and interact with the IE Web Controls.

The remainder of this article focuses specifically on the TreeView IE Web control and examines how to display data with this control in an ASP.NET Web page. To learn more about the other IE Web Controls, check out the Internet Explorer WebControls Overview—and the Internet Explorer WebControls Reference.

Installing the IE Web Controls

In order to use the IE Web Controls in your ASP.NET Web applications, you must first download the controls' source code and run a build batch file that will compile the source code and copy all the needed files to the appropriate Web application directories. The Internet Explorer Web Controls Download Packages is a 360 KB, self-extracting install file.

Once you have downloaded and installed the IE Web Controls, a new directory will be created (the default is C:\Program Files\IE Web Controls\, although you can configure it during the installation). Navigate to this new directory and double-click thebuild.batfile. This will create a new subdirectory, build, and compile the classes in thesrcsubdirectory, copying the resulting assembly and support files into thebuildsubdirectory.

After running thebuild.batfile, the build subdirectory will have in it the assembly fileMicrosoft.Web.UI.WebControls.dlland a subdirectory called Runtime. In order to start using the IE Web Controls in an ASP.NET Web application you must copy the contents of thebuild\Runtimesubdirectory to the Web application's/webctrl_client/1_0subdirectory and the assembly file (Microsoft.Web.UI.WebControls.dll) to the Web application's/binsubdirectory (an example, along with command-line instructions to perform these tasks, is available in the IE Web Controls README.txt file).

Getting Started with the IE Web Controls

If you are using Microsoft Visual Studio® .NET to develop your ASP.NET Web application, adding IE Web Controls to an ASP.NET Web page is a breeze. Start by including the IE Web Controls in the Toolbox; to accomplish this, right-click on the Toolbox and select the Customize Toolbox option. Choose the .NET Framework Components tab and click the Browse button. Navigate to theMicrosoft.Web.UI.WebControls.dllassembly file and click OK. This will add the MultiPage, TabStrip, Toolbar and TreeView IE Web Controls to the Visual Studio .NET Toolbox. To add any of these controls to your ASP.NET Web pages, simply drag and drop the appropriate control from the Toolbox onto the Designer.

In order to work with the IE Web Controls in your code-behind class you will first need to add a Reference to theMicrosoft.Web.UI.WebControls.dllassembly by right-clicking on References and selecting Add Reference. Then, in your code-behind class, if you are using C# addusing Microsoft.Web.UI.WebControls;if you are using Microsoft Visual Basic® .NET, add Imports Microsoft.Web.UI.WebControls.

If you are not using Visual Studio .NET as your ASP.NET Web application editor, you will need to manually add the following@Registerdirective at the top of your ASP.NET Web page:

<%@ Register TagPrefix="whatever" 
          Namespace="Microsoft.Web.UI.WebControls"
         Assembly="Microsoft.Web.UI.WebControls" %>

Then, to add an IE Web Control to your Web page use the following syntax:

<whatever:WebControlName runat="server" ...>
  ...
</whatever:WebControlName>

For example, to add a TreeView control, you could add the following@Registerdirective at the top of the page:

<%@ Register TagPrefix="iewc" 
         Namespace="Microsoft.Web.UI.WebControls"
         Assembly="Microsoft.Web.UI.WebControls" %>

And then add the following Web control syntax where you wanted to TreeView to appear in your ASP.NET Web page:

<iewc:TreeView runat="server" ...>
  ...
</iewc:TreeView>

Getting Started with the TreeView IE Web Control

The TreeView IE Web control, when rendered in a visitor's browser, displays a tree, much like the tree in the Windows Explorer. Specifically, the TreeView consists of an arbitrary number of TreeNode objects. Each TreeNode object can have text and an image associated with it; additionally the TreeNode can be rendered as a hyperlink and have a URL associated with it. Each TreeNode also can have an arbitrary number of children TreeNode objects. The hierarchy of TreeNodes and their children constitute the makeup of the tree rendered by the TreeView control.

Imagine that you wanted to build a TreeView control that displayed your family's genealogy. Since this information rarely changes, you might want to statically specify the TreeView structure. If you are using Visual Studio .NET, statically specifying the TreeView's structure is as simple as filling out a few forms. First, start by adding a new TreeView control to your ASP.NET Web page by dragging and dropping the TreeView control from the Toolbox onto the Designer. Next, set theIDproperty of the TreeView control to tvFamilyTree. After these two steps your screen should appear similar to Figure 1.

Aa479012.aspnet-usingtreeviewiewebcontrol-01(en-us,MSDN.10).gif

Figure 1. Simple TreeView

Now, to statically specify the TreeNodes that constitute the TreeView, select the Nodes property from the Properties pane and click on the ellipsis button at the right of this property. This will display the TreeNodeEditor dialog box. Here you can add new TreeNodes to the TreeView. Figure 2 shows the TreeNodeEditor dialog box after the family tree information has been entered.

Aa479012.aspnet-usingtreeviewiewebcontrol-02(en-us,MSDN.10).gif

Figure 2. TreeNodeEditor Dialog Box

Filling out the TreeNodeEditor dialog box adds the following markup to the .aspx portion of the ASP.NET Web page:

<ie:TreeView id="tvFamilyTree" runat="server">
   <ie:TreeNode Text="John Smith">
      <ie:TreeNode Text="Born: Jan. 3rd, 1885"></ie:TreeNode>
      <ie:TreeNode Text="Died: Feb. 13, 1919"></ie:TreeNode>
      <ie:TreeNode Text="Spouse">
         <ie:TreeNode Text="Marie Ellsworth">
            <ie:TreeNode Text="Born: Aug. 1, 1889"></ie:TreeNode>
            <ie:TreeNode Text="Died: Unknown"></ie:TreeNode>
         </ie:TreeNode>
         <ie:TreeNode Text="Children">
            <ie:TreeNode Text="John Smith, Jr.">
               <ie:TreeNode Text="Born: July 4, 1891"></ie:TreeNode>
               <ie:TreeNode Text="Died: Sept. 22, 1893"></ie:TreeNode>
            </ie:TreeNode>
            <ie:TreeNode Text="Mary Smith">
               <ie:TreeNode Text="Born: June 7, 1893"></ie:TreeNode>
               <ie:TreeNode Text="Died: Aug. 13, 1949"></ie:TreeNode>
               <ie:TreeNode Text="Spouse">
                  <ie:TreeNode Text="Edward Joy">
                     <ie:TreeNode Text="Born: Unknown"></ie:TreeNode>
                     <ie:TreeNode Text="Died: Aug. 13, 
                       1949"></ie:TreeNode>
                  </ie:TreeNode>
                  <ie:TreeNode Text="Children">
                     <ie:TreeNode Text="Michael Joy">
                        <ie:TreeNode Text="Born: Oct. 8,
                          1918"></ie:TreeNode>
                     </ie:TreeNode>
                     <ie:TreeNode Text="Michele Joy">
                        <ie:TreeNode Text="Born: May 21, 
                          1920"></ie:TreeNode>
                     </ie:TreeNode>
                  </ie:TreeNode>
               </ie:TreeNode>
            </ie:TreeNode>
         </ie:TreeNode>
      </ie:TreeNode>
   </ie:TreeNode>
</ie:TreeView>

If you are not using Visual Studio .NET as your editor, then you will need to add this content to the ASP.NET Web page by hand. When viewed through a browser, the ASP.NET Web page displays the expandable tree shown in Figure 3. (Figure 3 shows the tree after various nodes have been expanded. By default, only the root node will be displayed. You can set the TreeNode'sExpandedproperty to indicate that a given TreeNode should be expanded when the page is first viewed.)

Aa479012.aspnet-usingtreeviewiewebcontrol-03(en-us,MSDN.10).gif

Figure 3. Expanded TreeNode

In addition to a textual label, TreeNodes can have images associated with them as well. Specifically, a TreeNode can have three images associated with it: one that is displayed when the TreeNode is in its normal, unexpanded state; one when the TreeNode is in its Expanded state; and one when the TreeNode is selected (a TreeNode becomes selected when it is clicked by the user). All three of these properties expect a URL to a specified image.

For example, we can extend our family tree demo by setting the TreeView'sImageUrlproperty to the URL of a closed folder and the TreeView'sExpandedImageUrlproperty to the URL of an open folder to display open and closed folders for non-expanded and expanded TreeNodes, respectively. (If we wanted to have a different image for a selected TreeNode, we'd simply set the TreeView'sSelectedImageUrlproperty to the appropriate URL.)

Realize that both the TreeView and TreeNode have the ImageUrl, ExpandedImageUrl, andSelectedImageUrlproperties. The difference is when setting the TreeView's properties by default all TreeNodes in the TreeView will display the specified images. If you set the TreeNode's properties, then those properties hold only for that specific TreeNode. Since we want to have all of the TreeNodes display a closed folder in their non-expanded state and an open folder in their expanded state, we set theImageUrlandExpandedImageUrlproperties of the TreeView control.

With these new property settings, the look and feel of Figure 3 is enhanced. The new TreeView appearance, with images next to the TreeNodes, is shown in Figure 4.

Aa479012.aspnet-usingtreeviewiewebcontrol-04(en-us,MSDN.10).gif

Figure 4. TreeNode with Images

TreeNodes can also have a URL associated with them. Such TreeNodes, when clicked, will automatically whisk the user to the specified URL. The TreeNode'sNavigateUrlproperty indicates the URL the user is sent to when the TreeNode is clicked. Such functionality is quite useful in an ASP.NET Web page with two frames. In the left frame, you could have a TreeView control. When the user clicks a TreeNode, detailed information about that particular node could then appear in the right frame, similar to how Windows Explorer displays the file system's folders in the left pane and, when a folder is clicked, that folder's files are displayed in the right pane.

To accomplish this, simply set each TreeNode'sNavigateUrlto the proper URL. To have the TreeNode's associated URL loaded in a different browser frame, set the TreeNode'sTargetproperty to the appropriate frame name. These steps can all be accomplished through the TreeNodeEditor. To see an example of such an application, be sure to read Steve Sharrock's article on using the TreeView to create an Explorer-style ASP.NET Web application, TreeView - Programming an Explorer-style Site View.

More Advanced TreeView Features

While adding static TreeNodes to a TreeView is incredibly simple using Visual Studio .NET, more often than not you will want to dynamically add content to the TreeView. For example, you might have the family tree information stored in a database; or, if you are designing an Explorer-like Web application, where the user can browse the Web server's file system, you would need to dynamically populate the TreeNodes based upon the server's folders and files.

TreeNodes can be programmatically added to the TreeView in the code-behind class. To add a new TreeNode to an existing TreeNode, simply use the Add() method of the Nodes property. For example, the following C# code creates two TreeNodes, adding the second as a child of the first. It then adds the first child to TreeView's root nodes.

// Create the first TreeNode
TreeNode tvFirst = new TreeNode();
tvFirst.Text = "First Tree Node";

// Create the second TreeNode
TreeNode tvSecond = new TreeNode();
tvSecond.Text = "Second Tree Node";

// Add the second TreeNode as a child of the first
tvFirst.Nodes.Add(tvSecond);

// Add the first TreeNode to the TreeView's root TreeNodes
tvFamilyTree.Nodes.Add(tvFirst);

Unfortunately, binding database data to the TreeView is not nearly as simple as binding data to one of the standard ASP.NET data Web controls. Since the TreeView inherently describes hierarchical data, it is not well suited to displaying the results from a simple SQL query. Therefore, the TreeView was designed not to display the contents of a simple SQL query, but instead the contents of an XML file. Therefore, in order to easily display database information in a TreeView you must first convert it to XML.

Similarly, you can display static or dynamic XML files in a TreeView control. However, the TreeView expects XML data formatted in a particular way. Therefore, to display an XML file in the TreeView you must provide an XSLT stylesheet to transform the XML from its current format into the format expected by the TreeView. To learn more on how to accomplish this task, be sure to read my article, Displaying XML Data in the Internet Explorer TreeView Control.

Finally, in addition to supporting images and serving as hyperlinks, the TreeNodes of the TreeView can also contain checkboxes next to them. Furthermore, when the user expands or collapses a TreeNode, selects a TreeNode, or checks or unchecks a TreeNode that has a checkbox, an appropriate event fires. Event handlers can be created for these events to allow for custom actions to occur when these events transpire.

Summary

In this article we briefly examined the IE Web Controls, looking at how to obtain and install them, as well as examined in more depth using the TreeView IE Web control. The TreeView control mimics the standard Windows TreeView display, which can be seen in action in the Windows Explorer. The TreeView is used for displaying hierarchical data, and is made up of an arbitrary number of TreeNodes, each of which has an arbitrary number of TreeNode children.

The appearance of TreeNodes can be customized extensively. For example, you can specify different images for TreeNodes that are collapsed, expanded, and selected. TreeNodes, when clicked, can act as hyperlinks, redirecting the visitor to another URL. TreeNodes can also contain checkboxes.

Displaying static data in a TreeView is simple and can be accomplished in Visual Studio .NET via the TreeNodeEditor. The TreeView control's content can be specified dynamically either by adding TreeNodes programmatically, or through an XML file. This article only scratches the surface of the TreeView control, but should be ample material to get you started on utilizing this control in your own ASP.NET Web applications.

Happy Programming!

About the Author

Scott Mitchell, author of five ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies for the past five years. An active member in the ASP and ASP.NET community, Scott is passionate about ASP and ASP.NET and enjoys helping others learn more about these exciting technologies. For information on the DataGrid, DataList, and Repeater controls check out Scott's latest book, ASP.NET Data Web Controls Kick Start (ISBN: 0672325012).