ASP.NET 2.0中的treeView
In ASP.NET, we missed functionality of a TreeView control for the Web. Now ASP.NET 2.0 provides a TreeView control. ASP.NET 2.0 TreeView control provides pretty similar functionality as Windows Forms TreeView control. A TreeView is used to display data in hierarchical order in a tree structure which has a parent and children and sub children and the navigation in a TreeView happens by moving from a parent to child, sub child and vice versa. Some of the features of ASP.NET TreeView features are following:
- Data Binding - TreeView control works as any other data-bound control. You can bind XML objects, relational data coming through DataSet and DataReader objects, or any other objects that represents tabular or relational data.
- Supports SiteMapDataSource data binding, which provides site navigation.
- Nodes can have check boxes.
- Supports customizable appearance through themes and styles.
- Node text can be hyperlinked.
Creating a TreeView Control
In Visual Studio, you can create a TreeView by simply dragging control from Toolbox to the Web page. This action adds the following code snippet to the HTML:
<asp:TreeView ID="TreeView1" Runat="server">
</asp:TreeView>
Auto Format
TreeView supports Auto Format feature, which allows you to select from already existing formats such as XP File Explorer, MSDN, Windows Help, Bulleted lists and so on. You can select Auto Format from Properties or Common Tasks lists. See Figure 1.
Figure 1. Common TreeView Tasks
XP File Explorer and News formats are shown in Figure 2 and Figure 3.
Figure 2. XP File Explorer view of TreeView
Figure 3. News view of TreeView
Now after setting the "XP File Explorer", the designer adds the following code:
<asp:TreeView ID="TreeView1" Runat="server" ImageSet="XPFileExplorer" NodeIndent="15" Width="174px" Height="193px">
<SelectedNodeStyle BackColor="#B5B5B5"></SelectedNodeStyle>
<NodeStyle VerticalPadding="2" Font-Names="Tahoma" Font-Size="8pt" HorizontalPadding="2"
ForeColor="Black"></NodeStyle>
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA"></HoverNodeStyle>
</asp:TreeView>
As you can see from this code, ImageSet attribute sets the format type of the TreeView.
Adding Nodes to a TreeView using Visual Studio Editor
There are three ways you can add a TreeView contents
- Hard coded in HTML by hand or using Visual Studio editor
- Load dynamically from an XML file
- Add programmatically at run time
First option is useful when the TreeView contents are fixed. For example, if you want to provide your site navigation listed in a TreeView format, you can simply hardcode the TreeView nodes, their description and links.
To add TreeView nodes using visual Studio editor, you select Edit Nodes option. See Figure 4.
Figure 4. Edit Nodes option of TreeView
The Edit Nodes option launches TreeView Node Editor (see Figure 5), which allows you to add, delete nodes and their children, and also set their properties such as name of the node, navigation URL, tooltip, and other properties.
Figure 5. TreeView Node Editor
You can also add the code generated by VS editor by hand as well. The asp:TreeView represents the TreeView and asp:TreeNode represents a node. You can have these tags recursively to add children to an existing node. For example, if you write the following code by hand, it will generate Figure 6, which is same as we did using HTML editor.
<asp:TreeView ID="TreeView1" Runat="server">
<Nodes>
<asp:TreeNode Value="Home Page" Text="Home Page">
<asp:TreeNode Value="About Us" Text="About Us"></asp:TreeNode>
<asp:TreeNode Value="Contents" Text="Contents">
<asp:TreeNode Value="Articles" Text="Articles"></asp:TreeNode>
<asp:TreeNode Value="Source Code" Text="Source Code"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Value="Partners" Text="Partners">
<asp:TreeNode Value="C# Corner" NavigateUrl="www.c-sharpcorn.com" ImageToolTip="C# Corn"
ShowCheckBox=true Text="C# Corner"></asp:TreeNode>
<asp:TreeNode Value="VB.NET Heaven" Text="VB.NET Heaven"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
Figure 6. TreeView with nodes
Adding Nodes to a TreeView from an XML File
The second option is more flexible. You can load the contents of a TreeView from an XML file, when the TreeView is loaded first time. This option is flexible enough so you can alter the TreeView contents by simply changing the XML file. See here how to create an XML file and load its data in a TreeView using XmlDataSource control.
Adding Nodes to a TreeView Dynamically
Third option is when you are loading dynamic data at run-time. You can create TreeView nodes and set their properties dynamically. TreeView control has a Nodes property, which is a collection of nodes. The Add method of TreeView.Nodes allows you to add nodes to the TreeView. For example, the following code adds a root node with two children to the TreeView control. To test this code, drop a TreeView control to the page, and call this code on page load.
void LoadTreeViewNodes()
{
// Create a root node
TreeNode root = new TreeNode();
root.Text = "Root Node";
// Add two childrent to the root node
TreeNode child = new TreeNode();
child.Text = "Child1";
root.ChildNodes.Add(child);
child = new TreeNode();
child.Text = "Child2";
root.ChildNodes.Add(child);
// Add root node to TreeView
TreeView1.Nodes.Add(root);
}
You can also set other properties of TreeNode dynamically. As you can see from Figure 7, the editor shows you the list of all available properties.
Figure 7. TreeNode properties
Hyperlinking in TreeView
To add a hyperlink to a node, you set NavigateUrl property of asp:TreeNode property to the URL you want to hyperlink to. For example, the following code sets NavigateUrl property to http://ww.c-sharpcorn.com :
<asp:TreeNode Value="C# Corner" NavigateUrl="http://www.c-sharpcorner.com" ImageToolTip="C# Corner"
Text="C# Corner"></asp:TreeNode>
Check Boxes in TreeView
The ShowCheckBox property shows the checkbox of TreeView. The following code makes the CheckBox visible:
<asp:TreeNode Value="C# Corner" NavigateUrl="http://www.c-sharpcorner.com" ImageToolTip="C# Corner"
ShowCheckBox=true Text="C# Corner"></asp:TreeNode>
Data Binding in TreeView
TreeView control supports direct data binding with ADO.NET data source controls. See my Working with ASP.NET 2.0 XML Data Source Control article for more details.
Display Images in TreeView
The ImageUrl property of the node sets the image of a node.
<asp:TreeNode Value="C# Corner" NavigateUrl="http://www.c-sharpcorner.com" ImageUrl="http://www.c-sharpcorn.com/Images/logo.gif" ImageToolTip="C# Corner" ShowCheckBox=true Text="C# Corner"></asp:TreeNode>
Getting and Setting Selected Node
TreeView.SelectedNode property returns the current selected node of the TreeView. Let's write a simple application where I should be able to change the text and hyperlink of the node dynamically. So I create a page with some controls on it. The final page looks like Figure 8. As you can see from this page, I add two buttons, two check boxes, a TreeView, two lables, and 2 text boxes. Initially Load Items button click load the TreeView items.
Figure 8. TreeView test page
The following code is responsible for loading TreeView items.
void LoadTreeViewNodes()
{
// Create a root node
TreeNode root = new TreeNode();
root.Text = "Root Node";
if (ShowLinesCheckBox.Checked)
TreeView1.ShowLines = true;
else
TreeView1.ShowLines = false;
if (ExpandCheckBox.Checked)
root.Expanded = true;
else
root.Expanded = false;
// Add two childrent to the root node
TreeNode child = new TreeNode();
child.Text = "Child1";
root.ChildNodes.Add(child);
child = new TreeNode();
child.Text = "Child2";
root.ChildNodes.Add(child);
// Add root node to TreeView
TreeView1.Nodes.Add(root);
}
void LoadItemsBtn_Click(object sender, EventArgs e)
{
TreeView1.Nodes.Clear();
LoadTreeViewNodes();
}
Now I write code on SelectedNodeChanged event of TreeView, where I read the text and hyperlink of the node and set TextBox1 and TextBox2 text as their values. After that on Change Node Properties button click event handler, I set the TreeView.SelectedNode 's Text and NavigateUrl properties to the values of textboxes.
void ChangeTextBtn_Click(object sender, EventArgs e)
{
TreeView1.SelectedNode.Text = TextBox1.Text;
TreeView1.SelectedNode.NavigateUrl = TextBox2.Text;
}
void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
TextBox1.Text = TreeView1.SelectedNode.Text;
TextBox2.Text = TreeView1.SelectedNode.NavigateUrl;
}
The output looks like Figure 9.
Figure 9. TreeView in action
Deleting TreeView Nodes
You can use Clear() method to delete all nodes in a TreeView. To delete a particular node, you can use Remove and RemoveAt methods. The Remove method takes a TreeNode as a parameters and RemoveAt takes an index. For example, the following like deletes the current selected node:
TreeView1.Nodes.Remove(TreeView1.SelectedNode);
Summary
TreeView control is a very useful when you need to display hierarchical data on your Web pages and now with the help of data source controls, it's very easy to bind data to a TreeView control. In this article, I discussed how to create and uses TreeView control in your applications using Visual Studio .NET or any other HTML editor. I also discussed how to display static data from XML data source and add dynamic data programmatically.
