ptg 1054 CHAPTER 22 Using the Navigation Controls <div class=”content”> You selected: <asp:Label id=”lblMessage” EnableViewState=”false” Runat=”server” /> </div> </form> </body> </html> The page in Listing 22.19 includes a SelectedNodeChanged event handler. When you select a new node, the SelectedNodeChanged event handler displays the value of the selected TreeNode in a Label control. Displaying Check Boxes with the TreeView Control You can display check boxes next to each node in a TreeView control by assigning a value to the ShowCheckBoxes property. This property accepts the following values: . All . Leaf . None . Parent . Root You can use a bitwise combination of these values when specifying the nodes to display with check boxes. The page in Listing 22.20 illustrates the ShowCheckBoxes property (see Figure 22.17). From the Library of Wow! eBook ptg 1055 Using the TreeView Control 22 LISTING 22.20 TreeViewCheckBoxes.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void btnSubscribe_Click(object sender, EventArgs e) { foreach (TreeNode node in TreeView1.CheckedNodes) bltSubscribed.Items.Add(node.Text); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>TreeView CheckBoxes</title> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 22.17 Displaying TreeView check boxes. From the Library of Wow! eBook ptg 1056 CHAPTER 22 Using the Navigation Controls Select the Newsgroups which you would like to join: <br /> <asp:TreeView id=”TreeView1” ShowCheckBoxes=”Leaf” Runat=”server”> <Nodes> <asp:TreeNode Text=”Programming”> <asp:TreeNode Text=”ASP.NET” /> <asp:TreeNode Text=”JAVA” /> <asp:TreeNode Text=”Cold Fusion” /> </asp:TreeNode> <asp:TreeNode Text=”Sports”> <asp:TreeNode Text=”Baseball” /> <asp:TreeNode Text=”Hockey” /> <asp:TreeNode Text=”Football” /> </asp:TreeNode> </Nodes> </asp:TreeView> <br /> <asp:Button id=”btnSubscribe” Text=”Subscribe” OnClick=”btnSubscribe_Click” Runat=”server” /> <hr /> You selected: <asp:BulletedList id=”bltSubscribed” EnableViewState=”false” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 1057 Using the TreeView Control 22 The page in Listing 22.20 displays nested newsgroups. You can subscribe to the news- groups by clicking the Subscribe button. When you click the Subscribe button, the CheckedNodes property returns a list of all the checked TreeNodes. This list displays in a BulletedList control. Binding to a Site Map You can use a TreeView control as a navigation element in your pages by binding the TreeView to a Site Map. The page in Listing 22.21 demonstrates how you can bind a TreeView to a SiteMapDataSource control (see Figure 22.18). FIGURE 22.18 Displaying a Site Map with a TreeView control. LISTING 22.21 UsingTreeView/TreeViewSiteMap.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>TreeView Site Map</title> </head> <body> <form id=”form1” runat=”server”> <div> From the Library of Wow! eBook ptg 1058 CHAPTER 22 Using the Navigation Controls <asp:TreeView id=”TreeView1” DataSourceID=”srcSiteMap” Runat=”server” /> <asp:SiteMapDataSource id=”srcSiteMap” Runat=”server” /> </div> </form> </body> </html> When you open the page in Listing 22.21, all the nodes from the Site Map display auto- matically in the TreeView control. By default, the SiteMapDataSource uses the XmlSiteMapProvider, which represents a file named Web.sitemap located at the root of an application. NOTE You c an add a TreeView and SiteMapDataSource control to a Master Page to show the TreeView in multiple pages. To learn more about Master Pages, see Chapter 5. Binding to an XML File Because an XmlDataSource control returns hierarchical data, you can bind a TreeView directly to an XmlDataSource. For example, imagine that you need to display the XML document contained in Listing 22.22. LISTING 22.22 Movies.xml <?xml version=”1.0” encoding=”utf-8” ?> <movies> <action> <StarWars /> <IndependenceDay /> </action> <horror> <Jaws /> <NightmareBeforeChristmas /> </horror> </movies> From the Library of Wow! eBook ptg 1059 Using the TreeView Control 22 The page in Listing 22.23 illustrates how you can display the contents of this XML docu- ment with a TreeView control. LISTING 22.23 TreeV iewXml .aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>TreeView XML</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” DataSourceID=”srcMovies” Runat=”server” /> <asp:XmlDataSource id=”srcMovies” DataFile=”~/Movies.xml” Runat=”server” /> </div> </form> </body> </html> The Movies.xml document in Listing 22.22 is extremely simple. The elements do not include any attributes. You can display more complicated XML documents with the TreeView control by declaring one or more TreeNodeBinding elements. For example, the nodes in the XML document in Listing 22.24 include id and text attributes. LISTING 22.24 MoviesComplex.xml <?xml version=”1.0” encoding=”utf-8” ?> <movies> <category id=”category1” text=”Action”> <movie id=”movie1” text=”Star Wars” /> <movie id=”movie2” text=”Independence Day” /> </category> From the Library of Wow! eBook ptg 1060 CHAPTER 22 Using the Navigation Controls <category id=”category2” text=”Horror”> <movie id=”movie3” text=”Jaws” /> <movie id=”movie4” text=”Nightmare Before Christmas” /> </category> </movies> The page in Listing 22.25 displays the contents of the XML document in Listing 22.24. LISTING 22.25 TreeViewXMLComplex.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>TreeView XML Complex</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” DataSourceID=”srcMovies” Runat=”server”> <DataBindings> <asp:TreeNodeBinding DataMember=”category” TextField=”text” ValueField=”id” /> <asp:TreeNodeBinding DataMember=”movie” TextField=”text” ValueField=”id” /> </DataBindings> </asp:TreeView> <asp:XmlDataSource id=”srcMovies” DataFile=”~/MoviesComplex.xml” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 1061 Using the TreeView Control 22 The TreeView in Listing 22.25 includes a DataBindings subtag. This tag includes two TreeNodeBinding elements. The first TreeNodeBinding specifies the relationship between <category> nodes in the XML document and TreeView nodes. The second TreeNodeBinding specifies the relationship between <movie> nodes and TreeView nodes. Binding to Database Data You cannot bind a TreeView control directly to a SqlDataSource or ObjectDataSource control because neither of these two controls exposes hierarchical data. If you want to display database data with the TreeView control, you have a choice: create a custom SqlHierarchicalDataSource control or programmatically bind the TreeView to the database data. The hard option is to build a SQL hierarchical DataSource control. You can do this by deriv- ing a new control from the base HierarchicalDataSourceControl class or by implementing the IHierarchicalDataSource interface. We explore this option in the final section. The second option is to build the TreeView control programmatically from a set of data- base records. This is the approach that we follow in this section. Imagine that you have a database table that looks like this: MessageId ParentId Subject 1 null How do you use the Menu control? 2 null What is the TreeView control? 3 1 RE:How do you use the Menu control? 4 1 RE:How do you use the Menu control? 5 2 RE:What is the TreeView control? 6 5 RE:RE:What is the TreeView control? This database table represents a discussion forum. The relationship between the messages is determined by the ParentId column. The messages that have a null ParentID represent the threads, and the other messages represent replies to the threads. The page in Listing 22.26 uses a TreeView control to display the contents of the Discuss database table (see Figure 22.19). From the Library of Wow! eBook ptg 1062 CHAPTER 22 Using the Navigation Controls LISTING 22.26 TreeViewDatabase.aspx <%@ Page Language=”C#” %> <%@ Import Namespace=”System.Web.Configuration” %> <%@ Import Namespace=”System.Data” %> <%@ Import Namespace=”System.Data.SqlClient” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> /// <summary> /// Only populate the TreeView when the page first loads /// </summary> void Page_Load() { if (!Page.IsPostBack) PopulateTreeView(); } /// <summary> /// Get the data from the database and create the top-level /// TreeView items /// </summary> FIGURE 22.19 Displaying database data with a TreeView control. From the Library of Wow! eBook ptg 1063 Using the TreeView Control 22 private void PopulateTreeView() { DataTable treeViewData = GetTreeViewData(); AddTopTreeViewNodes(treeViewData); } /// <summary> /// Use a DataAdapter and DataTable to grab the database data /// </summary> /// <returns></returns> private DataTable GetTreeViewData() { // Get Discuss table string selectCommand = “SELECT MessageId,ParentId,Subject FROM Discuss”; string conString = WebConfigurationManager.ConnectionStrings[“Discuss”].ConnectionString; SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString); DataTable dtblDiscuss = new DataTable(); dad.Fill(dtblDiscuss); return dtblDiscuss; } /// <summary> /// Filter the data to get only the rows that have a /// null ParentID (these are the top-level TreeView items) /// </summary> private void AddTopTreeViewNodes(DataTable treeViewData) { DataView view = new DataView(treeViewData); view.RowFilter = “ParentID IS NULL”; foreach (DataRowView row in view) { TreeNode newNode = new TreeNode(row[“Subject”].ToString(), row[“MessageId”].ToString()); TreeView1.Nodes.Add(newNode); AddChildTreeViewNodes(treeViewData, newNode); } } /// <summary> /// Recursively add child TreeView items by filtering by ParentID /// </summary> private void AddChildTreeViewNodes(DataTable treeViewData, TreeNode parentTreeViewNode) { From the Library of Wow! eBook . < ;asp: TreeNode Text=”Programming”> < ;asp: TreeNode Text= ASP. NET /> < ;asp: TreeNode Text=”JAVA” /> < ;asp: TreeNode Text=”Cold Fusion” /> < /asp: TreeNode> < ;asp: TreeNode Text=”Sports”>. < ;asp: TreeNode Text=”Sports”> < ;asp: TreeNode Text=”Baseball” /> < ;asp: TreeNode Text=”Hockey” /> < ;asp: TreeNode Text=”Football” /> < /asp: TreeNode> </Nodes> < /asp: TreeView> <br. Map display auto- matically in the TreeView control. By default, the SiteMapDataSource uses the XmlSiteMapProvider, which represents a file named Web.sitemap located at the root of an application. NOTE You