How to use the TreeView navigation control in ASP.NET

You can use the TreeView control to render rich tree views and to fill portions of the tree on demand without refreshing the entire page. The control supports a wide range of styles which you can use to transform its appearance. You can fill a TreeView by binding to an ordinary data source or by creating the nodes yourself, either programmatically or through the .aspx declaration. The second option is the simplest. In the next example, by adding <asp:TreeNode> tags to the <Nodes> section of a TreeView control, you can create several nodes:

<asp:TreeView ID=”TreeView1″ runat=”server”>

<Nodes>

<asp:TreeNode Text=”.NET development”>

<asp:TreeNode Text=”.NET Framework SDK”/>

</asp:TreeNode>

<asp:TreeNode Text=”Web development”/>

</Nodes>

</asp:TreeView>

 

You can add a TreeNode programmatically with the next code lines when the page loads:

 

In C#

 

TreeNode newNode = new TreeNode(“.NET Framework SDK”)

// Add as a child of the first root node

// (the .NET development node in the previous example).

TreeView1.Nodes[0].ChildNodes.Add(newNode);

 

In VB.NET

 

Dim NewNode as TreeNode = New TreeNode(“.NET Framework SDK”)

‘ Add as a child of the first root node

‘ (the .NET development node in the previous example).

TreeView1.Node(0).ChildNodes.Add(NewNode)

 

When the TreeView is first displayed, all the nodes are shown.  You can use the TreeView.ExpandDepth property to control its behavior. For example, if ExpandDepth is 3, only the first four levels are shown (level 0, level 1, level 2, and level 3).  You can control how many levels the TreeView includes altogether (collapsed or uncollapsed), by using MaxDataBindDepth property. By default, MaxDataBindDepth is -1, and you’ll see the entire tree. However, if you use a value such as 2, you’ll see only two levels under the starting node. You can also programmatically collapse and expand individual nodes by setting the TreeNode.Expanded property to true or false.