2.5. Display Hierarchical Data Using the TreeView Control
Note: At last, a TreeView control that comes right in the box of Visual Studio 2005.
If you have ever visited the MSDN Library site, you will no doubt have noticed the tree-like navigational menu on the left side of its home page (see Figure 2-24).
Figure 2-24. The tree-like navigation on the MSDN site
This information is displayed using the TreeView control, which provides an alternative to the SiteMapPath control for navigating your site. Tree maps are great for displaying hierarchical information and, unlike the SiteMapPath control, they let you browse the entire site, not just the path leading to your current page.
2.5.1. How do I do that?
Using the project created in the last lab, let's add a TreeView control to the site. You'll do this by adding the control to your Master page and binding it to your site map so that users can navigate your site by directly clicking the items in the TreeView control.
In the MasterPage.master Master page, add a 2 1 table (Layout Insert Table). Add a TreeView control to the left cell of the table and drag the ContentPlaceHolder control into the right cell (see Figure 2-25).
Figure 2-25. Populating the Master page
In the TreeView Tasks menu of the TreeView control, select <New data source...> (see Figure 2-27).
Figure 2-26. Adding the TreeView control to the Master page
In the Data Source Configuration Wizard dialog, select Site Map and then click OK (see Figure 2-27).
Figure 2-27. Choosing the Site Map as the data source
Apply the MSDN theme (via the "Auto Format..." link in the TreeView Tasks menu shown in Figure 2-28) to the TreeView control, and set the BackColor property of the TreeView control to Gray (#E0E0E0).
Figure 2-28. The TreeView control
The SiteMapDataSource control represents a site map. As explained in Section 2.4, a site map describes the logical structure of a web site and the relationship between its pages.
Tip: Visual Studio 2005 supports various formatting styles for the TreeView control. See Figure 2-29 for some samples.
Figure 2-29. The various formatting styles supported for the TreeView
The Master page should now look like Figure 2-30.
Figure 2-30. The TreeView control in the Master page
Press F5 to see how the TreeView control looks. You should now be able to navigate between all the pages in your site by selecting the items in the TreeView control (see Figure 2-31).
Tip: If you are using frames in your page, you can use the Target property of the TreeView control to indicate the name of the frame to display the page when an item is clicked.
Figure 2-31. Testing the TreeView control
2.5.2. What about...
...using your own XML document instead of a site map for the TreeView control?
Apart from using a site map file with the TreeView control, you can also create your own XML document and bind it to the TreeView control. For example, you may want to create an outline of a book and then bind it to the TreeView control so that users can navigate through the book using the TreeView control.
To configure the TreeView control to use an XML file, follow these steps:
Add an XML document to the project by right-clicking the project name in Solution Explorer. Select Add New Item..., and then select XML File. Name the file Book.xml.
Populate Book.xml with the XML shown in Example 2-7.
Example 2-7. Book.xml
<Book> <Content Title=".NET Compact Framework Pocket Guide" URL="booktop.aspx"> <Content Title="Part I" URL="PartI.aspx"> <Content Title="The .NET Framework and Mobile Devices" URL="PartIMain.aspx"> <Content Title="The .NET CLR" URL="PartI1.aspx" /> <Content Title="Windows Powered Mobile Devices" URL="PartI2.aspx" /> <Content Title="Tool and Language Support" URL="PartI3.aspx" /> <Content Title="Hello, Pocket PC" URL="PartI4.aspx" /> <Content Title="Debugging the Application" URL="PartI5.aspx" /> <Content Title="Troubleshooting" URL="PartI6.aspx" /> </Content> </Content> <Content Title="Part II" URL="PartIIMain.aspx"> <Content Title="User Interface Design" URL="PartII.aspx"> <Content Title="Using the Windows Forms Controls" URL="PartII1.aspx" /> <Content Title="Design Considerations for Smartphone Applications" URL="PartII2.aspx" /> </Content> </Content> <Content Title="Part III" URL="PartIIIMain.aspx"> <Content Title="Projects" URL="PartIII.apx"> <Content Title="Project A: Currency Converter" URL="PartIIIA.aspx" /> <Content Title="Project B: Book Ordering System" URL="PartIIIB.apx" /> <Content Title="Project C: Bluetooth Chat" URL="PartIIIC.apx" /> </Content> </Content> <Content Title="Part IV" URL="PartIVMain.aspx"> <Content Title="Deploying .NET Compact Framework Applications" URL="PartIV.aspx"> <Content Title="Packaging CAB Files" URL="PartIV1.aspx" /> <Content Title="Redistributing the .NET Compact Framework" URL="PartIV2.aspx" /> <Content Title="Deploying Smartphone Applications" URL="PartIV3.aspx" /> </Content> </Content> </Content> </Book>
You will be prompted to select an XML file to use (see Figure 2-32). Select the newly added Book.xml file.
Figure 2-32. Specifying the source of the XmlDataSource
Note: Note that you can specify an XSLT file to transform the XML document from one format to another. You can also use an XPath expression to filter part of the XML document.
The TreeView control should now look like the one shown in Figure 2-33. You need to edit the TreeNode data bindings so that you can display the information you want on the TreeView control. Click on the Edit TreeNode Databindings... link in the TreeView Tasks menu.
Figure 2-33. The TreeView control
In the Available DataBindings box (see Figure 2-34), select the Content item (highlighted) and click Add. Set the DataBinding properties as follows:
The element in the XML document to be used for binding to a node in the TreeView control. Set this property to Content.
The URL to navigate to when a bound node in the TreeView control is clicked. Set this property to URL.
The attribute to be used to display in a node in the TreeView control. Set this property to Title.
Figure 2-34. Using the TreeView DataBindings Editor
Press F5 to test the application. The TreeView control will look like the one shown in Figure 2-35.
Figure 2-35. The TreeView control bound to an XML file
2.5.3. Where can I learn more?
For alternative TreeView controls in ASP.NET, check out the following: