Evjen c14.tex V2 - 01/28/2008 2:39pm Page 677 Chapter 14: Site Navigation Listing 14-8: Hardware.xml <?xml version="1.0" encoding="utf-8"?> <Hardware> <Item Category="Motherboards"> <Option Choice="Asus" /> <Option Choice="Abit" /> </Item> <Item Category="Memory"> <Option Choice="128mb" /> <Option Choice="256mb" /> <Option Choice="512mb" /> </Item> <Item Category="HardDrives"> <Option Choice="40GB" /> <Option Choice="80GB" /> <Option Choice="100GB" /> </Item> <Item Category="Drives"> <Option Choice="CD" /> <Option Choice="DVD" /> <Option Choice="DVD Burner" /> </Item> </Hardware> As you can see, this list is not meant to be used for site navigation purposes, but instead for allowing the end user to make a selection from a hierarchical list of options. This XML file is divided into four categories of available options: Motherboards , Memory , HardDrives ,and Drives . To bind your TreeView control to this XML file, use an XmlDataSource control that specifies the location of the XML file you are going to use. Then within the TreeView control itself, use the < asp:TreeNodeBinding > element to specify which elements to bind in the XML file to populate the nodes of the TreeView control. This is illustrated in Listing 14-9. Listing 14-9: Binding a TreeView control to the Hardware.xml file <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Latest Hardware</title> </head> <body> <form id="form1" runat="server"> <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1"> <DataBindings> <asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" /> <asp:TreeNodeBinding DataMember="Item" TextField="Category" /> Continued 677 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 678 Chapter 14: Site Navigation <asp:TreeNodeBinding DataMember="Option" TextField="Choice" /> </DataBindings> </asp:TreeView> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Hardware.xml"> </asp:XmlDataSource> </form> </body> </html> The first item to look at is the < asp:XmlDataSource > control. It is just as simple as the previous < asp:SiteMapDataSource > control, but it points at the Hardware.xml file using the DataFile property. The next step is to create a TreeView control that binds to this particular XML file. You can bind a default TreeView control directly to the XmlDataSource control such as this: <asp:TreeView ID="TreeView1" runat="server" DataSourceId="XmlDataSource1" /> Doing this, you get the incorrect result shown in Figure 14-11. Figure 14-11 As you can see, the TreeView control binds just fine to the Hardware.xml file,butlookingatthenodes within the TreeView control, you can see that it is simply displaying the names of the actual XML ele- ments from the file itself. Because this isn’t what you want, you specify how to b ind to the XML file with the use of the < DataBindings > element within the TreeView control. 678 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 679 Chapter 14: Site Navigation The < DataBindings > element encapsulates one or more TreeNodeBinding objects. Two of the more important available properties of a TreeNodeBinding object are the DataMember and TextField proper- ties. The DataMember property points to the name of the XML element that the TreeView control should look for. The TextField property specifies the XML attribute that the TreeView should look for in that particular XML element. If you do this correctly, using the < DataBindings > construct, you get the result shown in Figure 14-12. Figure 14-12 You can also see from Listing 14-9 that you can override the text value of the root node from the XML file, < Hardware >, and have it appear as Computer Hardware in the TreeView control, as follows: <asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" /> Selecting Multiple Options in a TreeView As stated earlier, the TreeView control is not meant to be used exclusively for navigation purposes. You can use it for all sorts of things. In many cases, you can present a hierarchical list from which you want theendusertoselectoneormoreitems. One great built-in feature of the TreeView control is the capability to put check boxes next to nodes within the hierarchical items in the list. These boxes enable end users to make multiple selections. The TreeView control contains a property called ShowCheckBoxes that can be used to create check boxes next to many different types of nodes within a list of items. 679 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 680 Chapter 14: Site Navigation The available values for the ShowCheckBoxes property are discussed in the following table. Value Description All Applies check boxes to each and every node within the TreeView control. Leaf Applies check boxes to only the nodes that have no additional child elements. None Applies no check boxes to any node within the TreeView control. Parent Applies check boxes to only the nodes considered parent nodes within the TreeView control. A parent node has at least one child node associated with it. Root Applies a check box to any root node contained within the TreeView control. When working with the ShowCheckBoxes property, you can set it declaratively in the control itself, as follows: <asp:TreeView ID="Treeview1" runat="server" Font-Underline="false" DataSourceID="XmlDataSource1" ShowCheckBoxes="Leaf"> </asp:TreeViewTreeView> Or you can set it programmatically by using the following code: VB TreeView1.ShowCheckBoxes = TreeNodeTypes.Leaf C# TreeView1.ShowCheckBoxes = TreeNodeTypes.Leaf; For an example of using check boxes with the TreeView control, let’s continue to expand on the com- puter hardware example from Listing 14-9. Create a hierarchical list that enables people to select multiple items from the list in order to receive a dditional information about them. Listing 14-10 shows an example of this. Listing 14-10: Applying check boxes next to the leaf nodes within the hierarchical list of nodes VB <%@ Page Language="VB" %> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) If TreeView1.CheckedNodes.Count > 0 Then Label1.Text = "We are sending you information on:<p>" For Each node As TreeNode In TreeView1.CheckedNodes Label1.Text += node.Text & " " & node.Parent.Text & "<br>" Next Else Label1.Text = "You didn’t select anything. Sorry!" 680 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 681 Chapter 14: Site Navigation End If End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Latest Hardware</title> </head> <body> <form runat="server"> Please select the items you are interested in: <p> <asp:TreeView ID="TreeView1" runat="server" Font-Underline="False" DataSourceID="XmlDataSource1" ShowCheckBoxes="Leaf"> <DataBindings> <asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" /> <asp:TreeNodeBinding DataMember="Item" TextField="Category" /> <asp:TreeNodeBinding DataMember="Option" TextField="Choice" /> </DataBindings> </asp:TreeView> <p> <asp:Button ID="Button1" runat="server" Text="Submit Choices" OnClick="Button1_Click" /> </p> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Hardware.xml"> </asp:XmlDataSource> </p> <asp:Label ID="Label1" runat="Server" /> </form> </body> </html> C# <%@ Page Language="C#" %> <script runat="server"> protected void Button1_Click(object sender, System.EventArgs e) { if (TreeView1.CheckedNodes.Count > 0) { Label1.Text = "We are sending you information on:<p>"; foreach (TreeNode node in TreeView1.CheckedNodes) { Label1.Text += node.Text + " " + node.Parent.Text + "<br>"; } } else { Label1.Text = "You didn’t select anything. Sorry!"; } } </script> 681 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 682 Chapter 14: Site Navigation In this example, you first set the ShowTextBoxes property to Leaf , meaning that you are interested in having check boxes appear only next to items in the TreeView control that do not contain any child nodes. The items with check boxes next to them should be the last items that can be expanded in the hierarchical list. After this property is set, you then work with the items that are selected by the end user in the Button1_Click event. The first thing you should check is w hether any selection at all was made: If TreeView1.CheckedNodes.Count > 0 Then End If Figure 14-13 682 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 683 Chapter 14: Site Navigation In this case, the number of checked nodes on the postback needs to be greater than zero, meaning that at least one was selected. If so, you can execute the code within the If statement. The If statement then proceeds to populate the Label control that is on the page. To populate the Label control with data from the selected nodes, you use a For Each statement, as shown here: For Each node As TreeNode In TreeView1.CheckedNodes Next This works with an instance of a TreeNode object and checks each TreeNode object within the TreeView1 collection of checked nodes. For each node that is checked, you grab the nodes Text value and the Text value of this node’s parent node to further populate the Label control, as follows: Label1.Text += node.Text & " " & node.Parent.Text & "<br>" In the end, you get a page that produces the results shown in Figure 14-13. Specifying Custom Icons in the TreeView Control The TreeView control allows for a high degree of customization. You saw earlier in the chapter that you were easily able to customize the look-and-feel of the TreeView control by specifying one of the built-in styles. Applying one of these styles dramatically changes the appearance of the control. One of the most noticeable changes concerns the icons used for the nodes within the TreeView control. Although it is not as easy as just selecting one of the styles built into the TreeView control, you can apply your own icons to be used for the nodes within the hierarchical list of nodes. The TreeView control contains the properties discussed in the following table. These properties enable you to specify your own images to use for the nodes of the control. Property Description CollapseImageUrl Applies a custom image next to nodes that have been expanded to show any of their child nodes and have the capability of being collapsed. ExpandImageUrl Applies a custom image next to nodes that have the capability of being expanded to display their child nodes. LeafNodeStyle-ImageUrl Applies a custom image next to a node that has no child nodes and is last in the hierarchical chain of nodes. NoExpandImageUrl Applies a custom image to nodes that, for programmatic reasons, cannot be expanded or to nodes that are leaf nodes. This is primarily used for spacing purposes to align leaf nodes with their parent nodes. ParentNodeStyle-ImageUrl Applies a custom image only to the parent nodes within the TreeView control. RootNodeStyle-ImageUrl Applies a custom image next to only the root nodes within the TreeView control. 683 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 684 Chapter 14: Site Navigation Listing 14-11 shows an example of these properties in use. Listing 14-11: Applying custom images to the TreeView control <asp:TreeView ID="TreeView1" runat="server" Font-Underline="False" DataSourceId="XmlDataSource1" CollapseImageUrl="Images/CollapseImage.gif" ExpandImageUrl="Images/ExpandImage.gif" LeafNodeStyle-ImageUrl="Images/LeafImage.gif"> <DataBindings> <asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" /> <asp:TreeNodeBinding DataMember="Item" TextField="Category" /> <asp:TreeNodeBinding DataMember="Option" TextField="Choice" /> </DataBindings> </asp:TreeView> Specifying these three images to precede the nodes in your control overrides the default values of using a plus (+) sign and a minus (–) sign for the expandable and collapsible nodes. It also overrides simply using an image for any leaf nodes when by default nothing is used. Using the code from Listing 14-11, you get something similar to the results illustrated in Figure 14-14 (depending on the images you use, of course). Figure 14-14 684 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 685 Chapter 14: Site Navigation Specifying Lines Used to Connect Nodes Because the TreeView control shows a hierarchical list of items to the end user, you sometimes want to show the relationship between these hierarchical items more explicitly than it is shown by default with the TreeView control. One possibility is to show line connections between parent and child nodes within the display. Simply set the ShowLines property of the TreeView control to True (by default, this property is set to False ): <asp:TreeView ID="TreeView1" runat="server" Font-Underline="False" DataSourceId="XmlDataSource1" ShowCheckBoxes="Leaf" ShowLines="True"> </asp:TreeViewTreeView> This code gives the result shown in Figure 14-15. Figure 14-15 If the ShowLines property is set to True , you can also define your own lines and images within the TreeView control. This is quite easy to do because Visual Studio 2008 provides you w ith an ASP.NET TreeView Line I mage Generator tool. This tool enables you to visually design how you want the lines and corresponding expanding and collapsing images to appear. After you have it set up as you want, the tool then creates all the necessary files for any of your TreeView controls to use. To get at the tool, move to the Design view of your file and click the smart tag for the TreeView control that is on your page. Here you find the option Customize Line Images. You will not see this option unless 685 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 686 Chapter 14: Site Navigation the Show Lines check box is checked. Click this and you are presented with the ASP.NET TreeView Line Generator dialog (shown in Figure 14-16). Figure 14-16 From within this dialog, you can select the images used for the nodes that require an Expand, Collapse, or NoCollapse icon. You can also specify the color and style of the lines that connect the nodes. As you create your styles, a sample TreeView control output is displayed for you directly in the dialog box based on how your styles are to be applied. The final step is to choose the output of the files that this dialog will create. When you have completed this step, click OK. This generates a long list of new files to the folder that you specified in the dialog. By default, the ASP.NET TreeView Line Image Generator wants you to name the output folder TreeLineImages , but feel free to name it as you wish. If the folder does not exist in the project, you are prompted to allow Visual Studio to create the folder for you. After this is in place, the TreeView control can use your new images and styles if you set the LineImagesFolder property as follows: <asp:TreeView ID="TreeView1" runat="server" ShowLines="True" DataSourceId="SiteMapDataSource1" LineImagesFolder="TreeViewLineImages"> The important properties are shown in bold. The ShowLines property must be set to True . After it is set, it uses the default settings displayed earlier, unless you have specified a location where it can retrieve custom images and styles using the LineImagesFolder property. As you can see, this simply points to 686 . provides you w ith an ASP. NET TreeView Line I mage Generator tool. This tool enables you to visually design how you want the lines and corresponding expanding and collapsing images to appear the < asp: TreeNodeBinding > element to specify which elements to bind in the XML file to populate the nodes of the TreeView control. This is illustrated in Listing 14-9. Listing 14-9: Binding. /> < ;asp: TreeNodeBinding DataMember="Item" TextField="Category" /> < ;asp: TreeNodeBinding DataMember="Option" TextField="Choice" /> </DataBindings> < /asp: TreeView> Specifying