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 IS NULL
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
#region Property
public DataTable DataSource
{
get;
set;
}
public String DisplayMember
{
get;
set;
}
public String ValueMember
{
get;
set;
}
public String ParentMember
{
get;
set;
}
public String KeyMember
{
get;
set;
}
#endregion
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.
Add PopulateTree
method in code-behind page of web user control. First, you need to check availability of parent/child relational data in data source.
private void PopulateTree(TreeView objTreeView)
{
if (DataSource != null)
{
}
}
Looping all records by the foreach
loop from top to bottom.
foreach (DataRow dataRow in DataSource.Rows)
{
}
Now checking first parent record in data source. So for all records traversing from top to bottom, so first parent is which, that has parent member value null
.
if (dataRow[ParentMember] == DBNull.Value)
{
}
Add first parent in the tree view as a root node.
TreeNode treeRoot = new TreeNode();
treeRoot.Text = dataRow[DisplayMember].ToString();
treeRoot.Value = dataRow[ValueMember].ToString();
treeRoot.ImageUrl = "~/Images/Folder.gif";
treeRoot.ExpandAll();
objTreeView.Nodes.Add(treeRoot);
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.
DataView dataView1 = new DataView(DataSource);
String strFilter = "" + ParentMember + "=" + parentid.ToString() + "";
dataView1.RowFilter = strFilter;
After successful filter, you will get only children under the parent member that have passed as parameter. Now task to add these child nodes under the parent that have come as parameter.
TreeNode childNode = new TreeNode();
childNode.Text = dataRow[DisplayMember].ToString();
childNode.Value = dataRow[ValueMember].ToString();
childNode.ImageUrl = "~/Images/oInboxF.gif";
childNode.ExpandAll();
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.
foreach (TreeNode cnode in GetChildNode(Convert.ToInt64(dataRow[KeyMember])))
{
childNode.ChildNodes.Add(cnode);
}
Lastly, add these nodes to TreeNodeCollection
.
childtreenodes.Add(childNode);
Finally, when traversing has been completed, then return TreeNodeCollection
.
return childtreenodes;
Now let's come back to PopulateTree
. So you get the collection of all nodes and you need to add all nodes to tree view. So far, follow the below code:
foreach (TreeNode childnode in GetChildNode(Convert.ToInt64(dataRow[KeyMember])))
{
treeRoot.ChildNodes.Add(childnode);
}
All together:
#region Method
private void CommonLoad()
{
PopulateTree(treeView);
}
private void PopulateTree(TreeView objTreeView)
{
if (DataSource != null)
{
foreach (DataRow dataRow in DataSource.Rows)
{
if (dataRow[ParentMember] == DBNull.Value)
{
TreeNode treeRoot = new TreeNode();
treeRoot.Text = dataRow[DisplayMember].ToString();
treeRoot.Value = dataRow[ValueMember].ToString();
treeRoot.ImageUrl = "~/Images/Folder.gif";
treeRoot.ExpandAll();
objTreeView.Nodes.Add(treeRoot);
foreach (TreeNode childnode in GetChildNode
(Convert.ToInt64(dataRow[KeyMember])))
{
treeRoot.ChildNodes.Add(childnode);
}
}
}
}
}
private TreeNodeCollection GetChildNode(long parentid)
{
TreeNodeCollection childtreenodes = new TreeNodeCollection();
DataView dataView1 = new DataView(DataSource);
String strFilter = "" + ParentMember + "=" + parentid.ToString() + "";
dataView1.RowFilter = strFilter;
if (dataView1.Count > 0)
{
foreach (DataRow dataRow in dataView1.ToTable().Rows)
{
TreeNode childNode = new TreeNode();
childNode.Text = dataRow[DisplayMember].ToString();
childNode.Value = dataRow[ValueMember].ToString();
childNode.ImageUrl = "~/Images/oInboxF.gif";
childNode.ExpandAll();
foreach (TreeNode cnode in GetChildNode
(Convert.ToInt64(dataRow[KeyMember])))
{
childNode.ChildNodes.Add(cnode);
}
childtreenodes.Add(childNode);
}
}
return childtreenodes;
}
#endregion
Add the following event in code-behind page of control.
#region event
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
CommonLoad();
}
}
#endregion
So parent/child tree view web user control has been created. You can use as many as you want in the website by just setting some properties.
Add a Test page in the website project. And place the control in the aspx page of Test Page.
<%@ Register Src="~/Controls/ParentChildTreeView.ascx" TagName="VTSTreeView"
TagPrefix="uc1" %>
<body>
<form id="form1" runat="server">
<uc1:VTSTreeView id="VTSTreeView1" runat="server"/>
</form>
</body>
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,
VTSTreeView1.DataSource = dataSet.Tables[0]
- Data table as a data source
VTSTreeView1.KeyMember =DepartmentId
- Primary key
VTSTreeView1.DisplayMember =Name
- Tree leaf
VTSTreeView1.ValueMember = DepartmentId
- Value for tree leaf
VTSTreeView1.ParentMember = DepartmentIdParent
- Parent id for the current tree leaf.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
CommonLoad();
}
private void CommonLoad()
{
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings
["ApplicationServices"].ToString()))
{
SqlDataAdapter dataAdapter = new SqlDataAdapter
("SELECT * FROM Department WHERE IsActive = 1 ", conn);
DataSet dataSet = new DataSet();
dataAdapter.Fill(dataSet);
VTSTreeView1.DataSource = dataSet.Tables[0];
VTSTreeView1.KeyMember = "DepartmentId";
VTSTreeView1.DisplayMember = "Name";
VTSTreeView1.ValueMember = "DepartmentId";
VTSTreeView1.ParentMember = "DepartmentIdParent";
}
}
Run the application. And you will get the following output in browser:
Figure 6
Conclusion
This demonstration will help you to build applications for Parent-Child (hierarchical) relational data.
Thank you!