In this article I will explain with an example, how to dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net.
First the data from database will be fetched into a DataTable and then using one by one Nodes will be dynamically added to the ASP.Net TreeView control.
Database
In order to populate TreeView with Parent Child relationship, I have made use of two tables namely VehicleTypes and VehicleSubTypes. The schema and the data present in both the tables are as follows.
VehicleTypes
![Dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net]()
![Dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net]()
VehicleSubTypes
![Dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net]()
![Dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The HTML Markup consists of an ASP.Net TreeView.
<h3>
Vehicle Details</h3>
<hr />
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px"></NodeStyle>
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Dynamically add Nodes to TreeView
The PopulateTreeView method is a recursive function. Inside the Page Load event, the TreeView is populated with the records from the VehicleTypes table.
Inside the PopulateTreeView method, a loop is executed over the DataTable and if the ParentId is 0 i.e. the node is a parent node, a query is executed over the VehicleSubTypes table to populate the corresponding child nodes and again the PopulateTreeView method is called.
This process continues until all parent nodes along with their child nodes are added to the TreeView.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("SELECT Id, Name FROM VehicleTypes");
this.PopulateTreeView(dt, 0, null);
}
}
private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode)
{
foreach (DataRow row in dtParent.Rows)
{
TreeNode child = new TreeNode
{
Text = row["Name"].ToString(),
Value = row["Id"].ToString()
};
if (parentId == 0)
{
TreeView1.Nodes.Add(child);
DataTable dtChild = this.GetData("SELECT Id, Name FROM VehicleSubTypes WHERE VehicleTypeId = " + child.Value);
PopulateTreeView(dtChild, int.Parse(child.Value), child);
}
else
{
treeNode.ChildNodes.Add(child);
}
}
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = Me.GetData("SELECT Id, Name FROM VehicleTypes")
Me.PopulateTreeView(dt, 0, Nothing)
End If
End Sub
Private Sub PopulateTreeView(dtParent As DataTable, parentId As Integer, treeNode As TreeNode)
For Each row As DataRow In dtParent.Rows
Dim child As New TreeNode() With { _
.Text = row("Name").ToString(), _
.Value = row("Id").ToString() _
}
If parentId = 0 Then
TreeView1.Nodes.Add(child)
Dim dtChild As DataTable = Me.GetData("SELECT Id, Name FROM VehicleSubTypes WHERE VehicleTypeId = " + child.Value)
PopulateTreeView(dtChild, Integer.Parse(child.Value), child)
Else
treeNode.ChildNodes.Add(child)
End If
Next
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
Screenshot
![Dynamically add Nodes to TreeView in ASP.Net using C# and VB.Net]()
Demo
Downloads
