Genealogy View(family tree) in ASP.NET C# with database

In my previous post I shown how to find no of nodes in left and right of a binary tree. Now in this article I will show you how to design the binary tree in ASP.NET  C#. We had retrieve the data from database in the previous post. I remain the database structure same in this example as previous.

Database structure :

-------------------------------------------------------
Id(int) | Parent_Id (int) | Placement (NVarChar(10))
-------------------------------------------------------
1          0                        -
2          1                        Left
3          1                        Right
4          2                        Left
5          2                        Right
-------------------------------------------------------

CREATE TABLE [dbo].[tblBinaryUsers](
    [tid_no] [nvarchar](50) NULL,
    [placement] [nchar](10) NULL,
    [parent_no] [nvarchar](50) NULL,
    [First_name] [nvarchar](50) NULL,
    [enroll_time] [nvarchar](50) NULL
)  

And insert into the table 

INSERT [dbo].[tblBinaryUsers] ([tid_no], [placement], [parent_no], [First_name], [enroll_time]) VALUES (N'100001', N'', NULL, N'Arkadeep De', N'6/7/2014')

INSERT [dbo].[tblBinaryUsers] ([tid_no], [placement], [parent_no], [First_name], [enroll_time]) VALUES (N'100002', N'Left', N'100001', N'Pradeep Das', N'8/7/2014')

INSERT [dbo].[tblBinaryUsers] ([tid_no], [placement], [parent_no], [First_name], [enroll_time]) VALUES (N'100003', N'Right', N'100001', N'Mekesh Nayak', N'9/7/2014')

I added two more fields with this structure. First_Name (nvarchar(255)) and Enroll_Time  (nvarchar(20)). 

First decide how many levels you want to show in the binary tree. Then design according to that Laval. Here I have done with 4 levels. 

So design the html first and then write the coding. I also added a search facility in this project to find the ID with a DropDownList. 
 Your design will be some thing like this.

 
As the code is little bit long I am not giving these here. But don't worry here is the link where you can download the full source code.

Your output will be like this.

Download the full source code here.

Download Now