ClientSideAsp.Net

Ever needed to display data in tree format inside an asp.net DropDownList or ListBox?.

A simple search for “tree dropdown list” returned lot of requests for asp.net dropdown tree. See here, here & here to see questions about dropdown list tree control in Asp.Net.

So I thought to blog about how to implement an asp.net tree dropdown list using c#.

One way to create dropdown list tree is show/hide JavaScript tree inside a div and simulate a dropdown display. But here am going to explain a very simple implementation using recursion. There is no JavaScript involved.

Click here to see the DEMO and DOWNLOAD the source

Features

1. Show data in tree format inside a dropdown list or listbox.
2. N-levels of tree nodes are possible.
3. No JavaScript.
4. All the usual dropdown list and listbox properties such as AutoPostaBack and multi selection is available
5. Admin side to add/update/delete nodes to the tree

Database Schema
An N-Level tree can be stored in a self referencing table (a table with foreign key to the same table). The table will have a PK field ID and an FK field ParentID which will refer to the ID field of same table itself.

Asp.Net Dropdownlist tree DB Schema

For the root nodes ParentID will be NULL. Take a look at the sample data given below

Asp.net DropdownList Tree DB Sample Data

Implementation
First select the whole data into a DataTable using the following SELECT query

SELECT TreeNodeID
, ISNULL(ParentNodeID, 0) ParentNodeID
, Title
FROM [dbo].[TreeNode] ORDER BY ParentNodeID, TreeNodeID

In the above query we are converting ParentID to zero for all the root nodes (having value NULL). This is important and you will understand why we are doing that when I explain the C# code.

Now in the C# code we will recursively insert Nodes to an Asp.Net drop down list from the datatable. On each iteration we will append proper indention and pointer at the front of the Title before inserting to drop down.

int level = -1;
private void RecursiveFillTree(DataTable dtParent, int parentID)
{
level++; //on the each call level increment 1
StringBuilder appender = new StringBuilder();
for (int j = 0; j < level; j++)
appender.Append("&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;");
if (level > 0)
appender.Append("|__");

DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
int i;
if (dv.Count > 0)
{
for (i = 0; i < dv.Count; i++)
{
ddlParentNode.Items.Add(new ListItem(Server.HtmlDecode( appender.ToString() + dv[i]["Title"].ToString()), dv[i]["TreeNodeID"].ToString()));
RecursiveFillTree(dtParent, int.Parse( dv[i]["TreeNodeID"].ToString()));
}
}
level--; //on the each function end level will decrement by 1
}

On each iteration we will filter the ParentID with the ID to find the child nodes of that node. On the first iteration we will use Zero as the ParentID. The variable level will keep the level of recursion and give proper indention.

I have also created a form to INSERT/UPDATE nodes into the drop down tree. Please click here to see it. If you delete a node from dropdown tree all the child nodes will automatically move to the immediate parent. That logic is written in the Stored procedure and you can change it to the way you want.

Click here to see the DEMO and DOWNLOAD the source