Implement TreeView control - ASP.NET Program

Write an ASP.NET application to implement the TreeView control with suitable example.

Answer:

TreeView Control:
TreeView web control is useful while displaying hierarchal data in tree structure.

A TreeView is a collection of TreeNodes object. It maintains the collection of columns. The TreeView supports both postback-style events and simple hyperlink navigation. TreeView also supports the rendering on different browsers.

In this application of ASP.NET, we will implement TreeView control to display the record on the browser. Each node represents by the text and value properties of TreeNodes.

Treeview.aspx

<!DOCTYPE html>
<html>
     <head runat="server">
          <title>TreeView</title>
     </head>
     <body>
           <form id="form1" runat="server">
                <div>
                     <asp:TreeView ID="TreeView1" runat="server">
                         <Nodes>
                              <asp:TreeNode Text="My Computer">
                                 <asp:TreeNode Text="Favorites">
                                   <asp:TreeNode Text="News">  
                                       <asp:TreeNode Text="Sports" NavigateUrl="#"/>
                                       <asp:TreeNode Text="Politics" NavigateUrl="#"/>
                                   </asp:TreeNode>
                                   <asp:TreeNode Text="Technology">  
                                      <asp:TreeNode Text="Microsoft" NavigateUrl="#"/>
                                      <asp:TreeNode Text="ASP.NET" NavigateUrl="#"/>
                                      <asp:TreeNode Text="Java" NavigateUrl="#"/>
                                      <asp:TreeNode Text="Python" NavigateUrl="#"/>
                                   </asp:TreeNode>
                                   <asp:TreeNode Text="Shopping">  
                                      <asp:TreeNode Text="Paytm" NavigateUrl="#"/>
                                      <asp:TreeNode Text="Amazon" NavigateUrl="#"/>
                                      <asp:TreeNode Text="FlipKart" NavigateUrl="#"/>
                                  </asp:TreeNode>
                               </asp:TreeNode>
                               <asp:TreeNode Text="Tutorial">
                                 <asp:TreeNode Text="TutorialRide" NavigateUrl="#"/>
                                 <asp:TreeNode Text="Crack English" NavigateUrl="#"/>
                              </asp:TreeNode>
                          </asp:TreeNode>
                       </Nodes>
                   </asp:TreeView>
                </div>
           </form>
      </body>
</html>


Output:

1.
treeview control

2. We can expand and collapse the tree view like the following image.

treeview control