ARTICLE

Using TreeView Control in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on January 06, 2011

Tags: .NET TreeView control, ASP.NET, eNode, eView control

The ASP.NET TreeView control is used to populate TreeNodes on demand with child-nodes when expanding a TreeNode.

Tweet
1544
0

Reader Level: Beginner

The ASP.NET TreeView control is used to populate TreeNodes on demand with child-nodes when expanding a TreeNode. This behaviour can be used to increase the performance when loading large amount of data to a TreeView. Lets clear it more through an example:

ASP.NET TreeView Control

Create an ASP.NET webite and drag a TreeView-control from the Toolbox onto the page Default.aspx. After that we create some sample TreeNodes for a company's staff and assign the AutoFormat contacts to the TreeView:

Here is the code snippets for the page Default.aspx.

<%@ Page Language="vb" Culture="vi-VN" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
     Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, ByVal e As EventArgs)
          lblMessage.Text = TreeView1.SelectedValue
     End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
      <title>TreeView Value</title>
</head>
<body style="height: 212px">
<asp:TreeView
   id="TreeView1"
   OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
   Runat="server" Height="284px" Width="303px" ImageSet="Contacts" NodeIndent="10">
<HoverNodeStyle Font-Underline="False"/>
     <Nodes>
         <asp:TreeNode
                 Text="HR Deptarment"
                 Value="HR Deptarment">
               <asp:TreeNode
                     Text="Director">
                    <asp:TreeNode
                          Text="Mr. Sunil Kumar"
                          Value="Mr. Sunil Kumar" />
                    </asp:TreeNode>
               <asp:TreeNode
                     Text="Managers">
                    <asp:TreeNode
                          Text="Project Manager">
                        <asp:TreeNode
                              Value="Mr. Keshav Singh" />
                        <asp:TreeNode
                              Text="Mr. Vinod Kashyap"
                              Value="Mr. Vinod Kashyap" />
                   <asp:TreeNode
                         Text="Sales Manager">
                        <asp:TreeNode
                              Text="Mr. Rahul Gupta"
                              Value="Mr. Rahul Gupta" />
                        <asp:TreeNode
                              Text="Mr. Aditya Pathak"
                              Value="Mr. Aditya Pathak" />
                   </asp:TreeNode>
        </asp:TreeNode>
     </Nodes>
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="blue"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="True" ForeColor="black" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
    Person to whom you contact:
<asp:Label
    id="lblMessage"
    EnableViewState="False"
    Runat="server" Font-Names="Verdana" ForeColor="#3333CC" />
</div>
</form>
</body>
</html>