Site Navigation
As you can see, if you use these built-in styles, it isn’t too difficult to completely change the look and feel of the TreeView control. When this bit of code is run, you get the results shown in Figure 5-10.
Figure 5-10
Examining the parts of the TreeView control
To master working with the TreeView control, you must understand the terminology used for each part of the hierarchical tree that is created by the control.
First, every element or entry in the TreeView control is called a node. The uppermost node in the hierarchy of nodes is the root node. It is possible for a TreeView control to have multiple root nodes. Any node, including the root node, is also considered a parent node if it has any nodes that are directly under it in the hierarchy of nodes. The nodes directly under this parent node are referred to as child nodes. Each parent node can have one or more child nodes. Finally, if a node contains no child nodes, it is referred to as a leaf node.
The following listing, based on the site map shown earlier, details the use of this terminology:
Home – Root node, parent node
News – Parent node, child node
U.S. – |
Child node, leaf node |
World – |
Child node, leaf node |
Technology – Child node, leaf node |
|
Sports |
– Child node, leaf node |
Finance – |
Parent node, child node |
Quotes |
- Child node, leaf node |
Markets |
– Parent node, child node |
U.S. |
Market Report – Child node, leaf node |
NYSE |
– Child node, leaf node |
Funds – |
Child node, leaf node |
Weather – |
Child node, leaf node |
139
Chapter 5
From this listing, you can see what each node is and how it is referred in the hierarchy of nodes. For instance, the U.S. Market Report node is a leaf node — meaning that it doesn’t have any child nodes associated with it. However, it is also a child node to the Markets node, which is a parent node to the U.S. Market Report node. If you are working with the Markets node directly, it is also a child node to the Finance node, which is its parent node. The main point to take away from all this is that each node in the site map hierarchy has a relationship to the other nodes in the hierarchy. You must understand these relationships because you can programmatically work with these nodes (as will be demonstrated later in this chapter) and the methods used for working with them includes terms like RootNode,
CurrentNode and ParentNode.
Binding the TreeView control to an XML file
You are not limited to working with just a .sitemap file in order to populate the nodes of your TreeView controls. You have many ways to get this done. One cool way is to use the XmlDataSource control (instead of the SiteMapDataSource control) to populate your TreeView controls from your XML files.
For an example of this, suppose that you created a hierarchical list of items in an XML file called Hardware.xml. An example of this is shown in Listing 5-8.
Listing 5-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 5-9:
140
Site Navigation
Listing 5-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” /> <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:SiteMapDataSourceSiteMapDataSource> 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 like this:
<asp:TreeViewTreeView ID=”TreeView1” Runat=”server”
DataSourceId=”XmlDataSource1” />
Doing this, you get the incorrect result shown in Figure 5-11.
Figure 5-11
141
Chapter 5
As you can see, the TreeView control binds just fine to the Hardware.xml file, but looking at the nodes within the TreeView control, you can see that it is simply displaying the names of the actual XML elements from the file itself. Because this isn’t what you want, you specify how to bind to the XML file with the use of the <DataBindings> element within the TreeView control.
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 properties. 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 with the use of the <DataBindings> construct, you get the result shown in Figure 5-12.
Figure 5-12
You can also see from Listing 5-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.
<asp:TreeNodeBinding DataMember=”Hardware” Text=”Computer Hardware” />
Selecting multiple options in a TreeView
As I stated earlier, the TreeView control is not meant to be used primarily for navigation purposes. Instead, you can use it for all sorts of things. In many cases, you can present a hierarchical list from which you want the end user to select one or more items.
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 allow end users to make multiple selections. The TreeView control contains a property called ShowCheckBoxes, which can be used create check boxes next to many different types of nodes within a list of items.
The available values for the ShowCheckBoxes property are discussed in the following table.
142
|
|
Site Navigation |
|
|
|
|
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:
<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 computer hardware example from Listing 5-9. Create a hierarchical list that enables people to select multiple items from the list in order to receive additional information about the selected items. Listing 5-10 shows an example of this.
Listing 5-10: Applying check boxes next to the leaf nodes within the hierarchical list of nodes
VB
<%@ Page Language=”VB” %>
<script runat=”server”>
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!” End If
End Sub </script>
(continued)
143
Chapter 5
Listing 5-10: (continued)
<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:ButtonButton 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”>
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>
144