asp.net.ph

Skip Navigation Links

Adding TreeView Nodes Declaratively

Controls You Can Use on Web Forms   ASP.NET Navigation Controls   TreeView Control


Basically, to create a working TreeView control, you need to add the control to the page and define the nodes that make up the tree structure.

The below procedures show the minimum steps needed to display static data in a TreeView control using declarative syntax.

To add a TreeView control to a Web Forms page

  1. Declare an <asp:treeview> element on the page. For syntax, see TreeView Control Syntax.
  2. Optionally set the control’s base properties.
    <asp:treeview id="myTreeView" runat="server"
       font-size=9pt>
  3. Within the TreeView declaration, declare a <Nodes> element.
  4. Within the <Nodes> element, define each <asp:TreeNode> element you intend to display, specifying at the very least the required Text property.
    • If the TreeView will be used for site navigation, set each node’s NavigateUrl property
    • Otherwise, optionally set each node’s Value property, to store any additional data that you may want to pass to the postback event handler.
  5. To create child nodes, nest additional <asp:TreeNode> elements between the opening and closing <asp:TreeNode> tags of the parent node.

The below example shows the declarative markup for a statically-defined TreeView control.

<asp:treeview id="myTreeView" runat="server"
   expanddepth=0 target="_blank">

   <nodes>
      <asp:treenode text="Favorites">
         <asp:treenode text="News">  
            <asp:treenode text="MSN" navigateurl="http://www.msn.com"/>
            <asp:treenode text="MSNBC News" navigateurl="http://www.msnbc.msn.com"/>
         </asp:treenode>
         <asp:treenode text="Technology">  
            <asp:treenode text="Microsoft" navigateurl="http://www.microsoft.com"/>
            <asp:treenode text="ASP.NET" navigateurl="http://www.asp.net"/>
            <asp:treenode text="GotDotNet" navigateurl="http://www.gotdotnet.com"/>
            <asp:treenode text="MSDN" navigateurl="http://msdn.microsoft.com"/>
         </asp:treenode>
         <asp:treenode text="Shopping">  
            <asp:treenode text="MSN Shopping" navigateurl="http://shopping.msn.com"/>
            <asp:treenode text="MSN Autos" navigateurl="http://autos.msn.com"/>
         </asp:treenode>
      </asp:treenode>

      <asp:treenode text="City Links">
         <asp:treenode text="MapPoint" navigateurl="http://www.mappoint.com"/>
         <asp:treenode text="MSN City Guides" navigateurl="http://local.msn.com"/>
      </asp:treenode>

      <asp:treenode text="Music Links">
         <asp:treenode text="MSN Music" navigateurl="http://music.msn.com"/>
      </asp:treenode>
   </nodes>

</asp:treeview>

 Show me 

See Also

Adding TreeView Nodes Programmatically   Binding a TreeView Control to a Data Source



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note