Introduction of TreeView Control
The ASP.NET 2.0 TreeView control is an entirely new control introduced with ASP.NET 2.0 (This control is different from the Microsoft Internet Explorer TreeView Web Control).
A TreeView control displays a hierarchical list of items using lines to connect related items in a hierarchy. Each item consists of a label and an optional bitmap. Windows Explorer uses a treeView control to display directories. You can use the TreeView control in any situation in which you need to display hierarchical data.
For example: you can use this control when displaying a navigation menu, displaying database records from database tables in a Master/Detail relation, displaying the contents of an XML document, or displaying files and folders from the file system.
It displays a tree structure, or menu, that users can traverse to get to different pages in your site. A node that contains child nodes can be expanded or collapsed by clicking on it.
You can use ASP.NET site Navigation features to provide a consistent way for users to navigate your site. A simple solution is to include hyperlinks that allow users to jump to other pages, presenting the hyperlinks in a list or a navigation menu. However, as your site grows, and as you move pages around in the site, it quickly becomes difficult to manage all of the links.
To create a consistent, easily managed navigation solution for your site, you can use ASP.NET site navigation TreeView control.
Figure 1: when we select TreeView control in toolbox this page is open.
The source code of the TreeView control is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</div>
</form>
</body>
</html>
Note: you can manually populate this control by,
-
Clicking on TreeView control
-
Right click --> Edit Nodes
-
Under 'Nodes' heading there are two buttons, to add Parent and child nodes respectively.
Figure 2: This page will be display when we edit some nodes.
We can add new node in the TreeView control as parent or child node. This control represents the hierarchical structure of the database. Now we will see the following step for edit new nodes.
Click on add a new node and give the name of that node in the property section then click on ok button then name of the root name will assign. And if again we want to select another node as parent node then we will repeat this process.
If we want to add some child node of the parent node then we will select add a child node option and assign the name of that child node.
Without select any root node child node can't create. But it's vice versa is not possible.
When we add some parent and child node in the treeView control then the treeView structure will be look as follows:
Figure 3: TreeView control represents the hierarchical structure of the records.
Source code of above structure:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged1" Height="235px">
<Nodes>
<asp:TreeNode Text="MCS SOLUTION" Value="MCS SOLUTION">
<asp:TreeNode Text="THERE ARE THE FOLLOWING WEBSITE" Value="THERE ARE THE FOLLOWING WEBSITE">
<asp:TreeNode Text="Based on dotnet technology" Value="Based on dotnet technology">
<asp:TreeNode Text="c-sharp corner.com" Value="c-sharp corner.com"></asp:TreeNode>
<asp:TreeNode Text="dotnetheaven.com" Value="dotnetheaven.com"></asp:TreeNode>
<asp:TreeNode Text="asp.dotnetheaven.com" Value="asp.dotnetheaven.com"></asp:TreeNode>
<asp:TreeNode Text="vb.netheaven.com" Value="vb.netheaven.com"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Other Website" Value="Other Website">
<asp:TreeNode Text="modellingcorner.com" Value="modellingcorner.com"></asp:TreeNode>
<asp:TreeNode Text="longhorncorner.com" Value="longhorncorner.com"></asp:TreeNode>
<asp:TreeNode Text="interviewcornen.com" Value="interviewcorner.com"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
Properties of TreeView control: TreeView Control have many properties, some of them are as follows:
Public Properties:
- Accesskey
- Attributes
- AutoGenerateDataBindings
- BackColor
- ForeColor
- BindingContainer
- BorderColor
- BorderStyle
- BorderWidth
- Client ID
- Controls
- ControlStyle
- Css Class
- DataBindings
- DataSource, etc
Protected properties:
Conclusion:
We've all had to create TreeViews and menus for our Web applications. Prior to ASP.NET 2.0, building these user interface elements required a substantial expenditure of time writing messy, difficult-to-debug, client-side JavaScript code. The ASP.NET 2.0 TreeView and Menu controls shield us from the JavaScript while providing us with the flexibility of building Web applications that offer rich, client-side user experiences.