Tapping the TreeView IE Web Control

Developers are making more Web controls available for Web forms, just as they did for Windows Forms. You might ask why the Web controls are not so easily available as Windows Forms controls. Well, the reason is quite simple; since the controls of Windows Forms are in the internal memory of the workstation, developers don't have to worry about postbacks and session state management, among other Web-related problems. With the .Net framework, the process of using Web controls has dramatically simplified. Web developers don't have to write extra code to take care those routines anymore. It's built in now, so developers can focus more on business logic. We are going to explore one of the interesting IE Web controls from Microsoft - the TreeView control.Where can you get the TreeView control?It's a free download from www.asp.net. You can download it from here. After downloading, install it, and remember the directory where you installed it. You will have the best experience with it if you have Visual Studio .Net. From your project, add a reference to the dll you just installed. By default, the assembly name is Microsoft.Web.UI.WebControls.dll and the namespace is Microsoft.Web.UI.WebControls. The assembly actually has other controls, too, such as Toolbar and Tabstrip controls. More can be added to the assembly by Microsoft in the future so just stay tuned to it.My first TreeView web controlOk, so now we've set up our infrastructure. Let's now go ahead and create our first Web page that uses the TreeView Web control. The HTML code snippet for the page is here:You need to use the Register directive to inform the ASP.Net engine to look for the name TreeView or TreeNode when it sees your TagPrefix "ie." The TagPrefix is arbitrary, and you can change it to anything you want. The basic structure of a TreeView is like this:1. A TreeView control can only have one pair of opening and closing tags named "TreeView." 2. A TreeView control can have multiple level of TreeNodes within it. 3. Each TreeNode can have multiple child TreeNodes. In the above code, the TreeView has two TreeNodes. The first one has the text attribute "My first Tree Node," and the second one has the text attribute "My second Tree Node." The two TreeNodes are not on the same level. The second node is a child node to the first one. When the page is displayed and the tree expanded, it looks like this:The collapse and expand behaviors are already implemented for you. This first example might seem too bland for you, so now we are going to do something fancy--we are going to put an image in each TreeNode. The code is as follows:You might think that's about it with the TreeView control. Actually, that's far from the truth. TreeView is designed to work smoothly with XML documents. However, there is a catch. You have to transform the XML document to "TreeView compliant" XML format, which is actually quite simple. The root element needs to be "Treenodes," and all child nodes are "treenode" regardless of what level they are. To specify an XML document to use as the source file for the TreeNode, just set the "TreeNodeSrc" attribute to the right path and filename.Here is a sample TreeView compliant XML document The code snippet to display the XML is as follows: The result when displayed in browser:You might wonder where the little globe image came from. It is specified by the ImageUrl. Actually all the images, including the little plus and minus signs, are in the SystemImagesPath, where a treeimages folder is installed. That means you can design a different set of images to take the place of default images and customize your TreeView's look and feel. TreeView, like other Web controls, supports events. The basic event that TreeView can fire up is a SelectedIndexChange event. From the event object, you can get the OldNode and the NewNode. You can always get the SelectedNodeIndex from the TreeView control. From there you can do any event handling you like to do. The source code and documentation of the whole package is freely available through the same download, so consult those if you would like to know more about TreeView and other controls.