The TreeView control is a data-bound control that is used to display hierarchical data, such as a listing of files and folders, or a table of contents in a tree structure. Each entry in the tree is called a node. The nodes of this control can be bound to XML, tabular, or relational data. This control can also provide site navigation when used with the SiteMapDataSource control.
You can programmatically access and control the properties of the TreeView control. The TreeView can also be populated via client-side script by using modern browsers. In addition, nodes can be displayed as either plaintext or hyperlinks, and you can opt to display a check box next to each node.
Each node is represented by a TreeNode object. A node that contains other nodes is called a parent node. A node that is contained by another node is called a child node. A node can be both a parent node and a child node. A node that has no children is called a leaf node. A node that is not contained by any other node but is the ancestor to all the other nodes is the root node.
The typical TreeView tree structure has only one root node, but you can add multiple root nodes to the tree structure. This means that you can display a tree hierarchy without being forced to have a single root node.
The TreeNode has a Text property that is populated with the data that is to be displayed.
The TreeNode also has a Value property that is used to store the data that is posted back to the web server.
You can configure a node to be a selection node or a navigation node by setting the NavigateUrl property. If the NavigateUrl property is set to an empty string (string.Empty), it is a selection node, and clicking the node simply selects it. If the NavigateUrl property is not set to an empty string, the node is a navigation node, and clicking it navigates to the location specified by the NavigateUrl property.
PoPULATINg THE TREEVIEW CoNTRoL
The TreeView control can be populated by using static data or by using data binding. To populate the TreeView control with static data, you can use declarative syntax by placing opening and closing <Nodes> tags in the TreeView element and then creating a structure of nested <TreeNode> elements within the <Nodes> element. Each <TreeNode> has prop-erties that you can set by adding attributes to the <TreeNode> element.
To use data binding to populate the TreeView control, you can use any data source that implements the IHierarchicalDataSource interface, such as an XmlDataSource control or a SiteMapDataSource control. Simply set the DataSourceID property of the TreeView control to the ID value of the data source control, and the TreeView control automatically binds to the specified data source control.
You can also bind to an XmlDocument object or a DataSet object that contains DataRelation objects by setting the DataSource property of the TreeView control to the data source and then calling the DataBind method.
The TreeView control contains a DataBindings property that is a collection of TreeNodeBinding objects that define the binding between a data item and the TreeNode. You can specify the binding criteria and the data item property to display in the node. This is useful when binding to XML elements when you are interested in binding to an attribute of the element.
Assume that you want to use a TreeView control to display customer data from a file called Customers.xml, which contains a list of customers, their orders and invoices, and the items for each order. This data is stored in a hierarchical format in the XML file. The Customers.xml file looks like the following.
<?xml version="1.0" encoding="utf-8" ?>
<Customers>
<Customer CustomerId="1" Name="Northwind Traders">
Lesson 2: Working with Data-Bound Web Server Controls CHAPTER 12 743
<Customer CustomerId="2" Name="Tailspin Toys">
<Orders>
An XmlDataSource and a TreeView control are added to the webpage and configured. The following shows the markup for the TreeView control.
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="XmlDataSource1"
ShowLines="True" ExpandDepth="0">
<DataBindings>
TextField="PartDescription" ValueField="OrderItemId" />
<asp:TreeNodeBinding DataMember="Invoice"
TextField="Amount" ValueField="InvoiceId"
FormatString="{0:C}" />
</DataBindings>
</asp:TreeView>
In this example, the configuration is kept to a minimum, but configuration is required to display information that is more important than the XML element name, such as the customer’s name instead of the XML element name (Customer). The following code is added to the code-behind page to simply display the value of the selected node.
Sample of Visual Basic Code
Partial Class TreeView_Control Inherits System.Web.UI.Page
Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles TreeView1.SelectedNodeChanged Response.Write("Value:" + TreeView1.SelectedNode.Value) End Sub
End Class
Sample of C# Code
public partial class TreeView_Control : System.Web.UI.Page {
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e) {
Response.Write("Value:" + TreeView1.SelectedNode.Value);
} }
When the webpage is displayed, the Customers node is visible. You can also click the plus (+) sign to expand the nodes, as shown in Figure 12-20.
Lesson 2: Working with Data-Bound Web Server Controls CHAPTER 12 745 fIGURE 12-20 The TreeView displays the nodes as configured.