Introduction

User control development is very simple for those who have some experience in ASP.NET. Treeview is a control that exists in ASP.NET. Basically it is used to create Data Tree. It can be used to build data tree up to infinity against Parent/Child data table.

Background

In this demonstration, I will show how to create a tree view user control in ASP.NET that will build data tree from parent/child relational data table by some properties settings.

Get Started

Open SQL Server 2005.

Design a table namely Department like the following table structure:

Figure 1

In the above table structure, IsActive is a bit field that is only used if you want to activate or deactivate that record. By default, it is active by giving value 1 while inserting each record into this table.

Insert some parent and related child data in the Department table. You may follow the picture given below:

Figure 2

Let's see how we can find child records under a parent records in SQL table in this demonstration Department table. It may vary in your case. You also need to identify parent records. Actually record is a individual Department here. Individual department may have child department in that case hierarchically TOP Department is parent department or record for hierarchically immediate down department or record. Hierarchically down department or record is called child for hierarchically immediate up department. This is parent-child relationship(hierarchic). By this mechanism, there are infinite number of parent-child records you may have in a table that has a structure like the above department table. This relationship maintained by self join within table between primary key and parent key for each records in this case each department.

Figure 3

You can find top most parent in a hierarchy by checking null in parent Id column. And for our department table, it will get by the following SQL.

SELECT * FROM Department WHERE Departmentidparent ISNULL

Output for the query:

Figure 4

You can find child records for a parent by following SQL query:

SELECT * FROM Department WHERE Departmentidparent=1

The result is:

Figure 5

We will do the above SQL operation in our control creation in code to build tree view of parent/child relational records.

Creating ASP.NET Website in Visual Studio in 2010

Create a website

Add Web User control

Add the following code for creating some properties in code-behind page of control so that will be configured from web page which will use this tree view user control. These properties are for:

DataSource -the source of parent/child relational data

DisplayMember - for tree leaf

ValueMember - holds key value for the display member

ParentMember -parent Member is the parent data for child data

KeyMember -key member is the primary key for the parent/child relational data

Add methods in code-behind page of control. To populate parent/child relational data in tree view control, you need to write recursive method in the following code. GetChildNode is the recursive method that will call till parent child relationship exists in data source against a parent id as parameter. PopulateTree is the starting point for recursive method GetChildNode. Actually PopulateTree starts recursion by calling GetChildNode with parent id as parameter. Remember parent id is the primary key for the current row.

GetChildNode method builds a collection of Tree Node Collection up to last child and returns the tree node collection to PopulateTree so that it can bind to Tree View control.

It is find child by filtering data source build into it with making a criteria for patient id.

CommonLoad is a method for calling PopulateTree method. Finally, called by load event.

Now let's create a recursive method and we will back in PopulateTree after finishing the recursive method GetChildNode. We all know that recursive is a method that can be called with itself until a condition is met. GetChildNode is a recursive method like that but it takes a parameter that is the parent member to find child under that parent and later it will pass by PopulateTree method. Finally this GetChildNode method returns a Tree Node Collection which is the collection of all parent nodes and related child nodes under parent node.

private TreeNodeCollection GetChildNode(long parentid)
{
}

Now get into the GetChildNode method. Create a TreeNodeCollecton local variable so that temporarily you can hold the nodes collection and finally you can return it.

TreeNodeCollection childtreenodes = new TreeNodeCollection();

Find the child record against the parameter that is parent member. For that, you need to filter data source that will set by DataSource property from web page. So you need to convert Data source property to DataView so that you can filter it by using data view's filter property. Note that Data table does not have filter property.

While adding each child node, you need to check child nodes for it by calling recursively GetChildNode method with a parent id as a parameter. In this case, child record primary key is the parent id. If child nodes are available, then add these to as child under node that is currently parent.

Add the following code in code-behind page of test page. And configure the tree view user control that you placed in this page. First, you need to create data source for under lining SQL table. In this case, Department table. And set the following properties for VTSTreeView1 control. like,

Parser Error Message: The base class includes the field 'VTSTreeView1', but its type (VTS.Web.UI.ParentChildTreeView) is not compatible with the type of control (ASP.controls_parentchildtreeview_ascx).
Source Error:
Line 103: <formid="form1"runat="server">
Line 104: <divid="divNavigation">
Line 105: <ucl:VTSTreeViewid="VTSTreeView1"runat="server"/>
Line 106:
Line 107: </div>