| Introduction |
| A Hierarchical Data is a data that is organized in a tree-like structure and structure allows information to be stored in a parent-child relationship with one-to-many relation records. This data can be stored either in a single table or different database tables with a parent-child relationship using foreign key. |
| |
 | The table structure shows the raw data stored in a database table. The column EmpNo is the primary unique key field and the column ReportsTo is the field we are going to refer as foreign key, by which the records are related to each other. There is lot of ways to do this concept, but we always prefer a simple and easiest way to achieve this |
|
| | For demonstration purpose, we are going to create Organizational Structure of a Company, which involves a Director, Manager, Sales Manager, Purchase Manager and other subordinate staffs. So we create table named as “Designation”, with 4 columns such as EmpNo, Designation, ReportsTo and Level. First three fields such as EmpNo, Designation and ReportsTo are self-explanatory. The last field Level is the rank of the designation in the Organization with 0 as its starting index. The Director of the company enjoys the top most position that he/she doesn’t need to report any one, so we input the level as 0, all the Managers of the company will come under Director, thus the level is 1, the department Managers such as Sales and Purchase will come under Manager, thus the level is 2 and the staff under them will be on level 3 and so on. Likewise, you can keep on increment the level based on rank of the Designation. Basically this column is used for creating a tree-like structure. |
|
Setup the Repeater Control:
In the aspx page, drag and drop a Repeater control, then go to the html source of this page, add the ItemTemplate in between the Repeater tag, then add an Asp.Net Table control from the toolbox.
|
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Table ID="Table1" runat="server"></asp:Table>
</ItemTemplate>
</asp:Repeater> |
|
Setup the Code-Behind:
The code-behind for this concept needs some attention, as it explains you the way to display the data in the database in a Hierarchical or tree-like structure. Let us go step by step.
Step 1: Add the SqlClient namespace in the code-behind as follows,
| using System.Data.SqlClient; |
Step 2: In the Page_Load event, you have to retrieve the data from the database and store it in a DataTable,
DataTable dt = new DataTable();
string sql = "Select * from Designation";
SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
da.Fill(dt); |
Step 3: Add the DataTable to a DataSet to add relationship between the columns in later stages.
DataSet Ds = new DataSet();
Ds.Tables.Add(dt); |
Step 4: Now create two DataColumn objects, one for Primary Key with the “EmpNo” column and one for Foreign Key with “ReportsTo” column from the DataTable.
DataColumn PriKey = new DataColumn();
PriKey = dt.Columns["EmpNo"];
DataColumn ForKey = new DataColumn();
ForKey = dt.Columns["ReportsTo"]; |
Step 5: Create a DataRelation object, binding both the Primary Key “PriKey” and Foreign Key “ForKey” columns and name the relation as “ParentChild”.
| DataRelation dataRel = new DataRelation("ParentChild", PriKey, ForKey, false); |
Step 6: Very Important, we need this DataRelation object “dataRel” to be nested, since we don’t know the number of levels it is going to contain.
Step 7: Finally, we need to add this relationship to the DataSet as follows,
| Ds.Relations.Add(dataRel); |
|
| |
So the DataSet is ready with relationship and next we need to bind the DataSet with the Repeater control. As per the concept of this article, we are going to display the data in an hirerchical structure. For this we need to do some code to achive this.
As we know only the initial level, but we have no idea of the final level, since there can be any number of level or even it can be infinity. So the best way is to loop through the rows is by a recursive methods. This recursive method will retrieve the record by record till its last level and store every record in a DataTable that can be referred by its memory location rather than its value.
Let us start, by writing a recursive method to retrieve the record and store it in a DataTable, which is accessed by its reference rather than its value. | |
|
private void GetChildObjects(DataRow[] drChild, ref DataTable dtFinal)
{
foreach (DataRow childRow in drChild)
{
dtFinal.ImportRow(childRow);
GetChildObjects(childRow.GetChildRows("ParentChild"), ref dtFinal);
}
} |
|
The above method GetChildObjects, has two parameters, the first one is the array of DataRow and the second is the “ref” DataTable which is going to have the records. Please note the “ref” keyword before the parameter declaration. This DataTable is responsible to hold the records to binding. Inside this method, we loop through the records of the DataRow arrays and we import record by record to the “ref” DataTable. Then again we call the same method GetChildObjects, to loop through its child rows. If there is no child rows, then execution will be stopped and no further call to this method will be made.
Now, we are going to write another method to kick off the GetChildObjects methods, as follows,
|
private DataTable GetParentObjects(DataTable dtMain)
{
DataTable dtFinal = dtMain.Clone();
foreach (DataRow parentRow in dtMain.Select("ReportsTo is null"))
{
dtFinal.ImportRow(parentRow);
GetChildObjects(parentRow.GetChildRows("ParentChild"), ref dtFinal);
}
return dtFinal;
} |
|
| |
| |
The above GetParentObjects method, takes a DataTable parameter, which can be the DataTable that holds the data from the database. Inside this method, we create a local DataTable object as “dtFinal” by cloning from the input parameter’s DataTable. The “Clone” method, simply copies the structure of the DataTable without the data. Next we are going to loop through the records in the incoming DataTable, and as we know the top level record in the database will have the ReportsTo field as null, we are going to start the loop from this record. If there are more than one record with ReportsTo as null, then this loop will run that many times. So we find the first record with ReportsTo as null, then import it into the “dtFinal” DataTable using the ImportRow method. Then we call the GetChildObjects method by passing child records of the current parent record and “dtFinal” DataTable which is passed by reference.
This is the starting point to the GetChildObjects method. Since we have nested the DataSet, the recusive method will run continuously till the last record to find its related child records. | |
|
Step 8: The last step in the Page_Load event, is to bind the Repeater control by calling the GetParentObjects as follows. Note that the argument passed to the GetParentObjects method is the DataSet’s first Table, not the DataTable object.
|
Repeater1.DataSource = GetParentObjects(Ds.Tables[0]);
Repeater1.DataBind(); |
The complete code of the Page_Load event is as follows,
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
string sql = "Select * from Designation";
SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
da.Fill(dt);
DataSet Ds = new DataSet();
Ds.Tables.Add(dt);
DataColumn PriKey = new DataColumn();
PriKey = dt.Columns["EmpNo"];
DataColumn ForKey = new DataColumn();
ForKey = dt.Columns["ReportsTo"];
DataRelation dataRel = new DataRelation("ParentChild", PriKey, ForKey, false);
dataRel.Nested = true;
Ds.Relations.Add(dataRel);
Repeater1.DataSource = GetParentObjects(Ds.Tables[0]);
Repeater1.DataBind();
}
} |
Setup Asp.Net Table Control to display the Hierarchy structure
To display the data in a Hierarchical structure, we need to code in the ItemDataBound event of the repeater control as follows.
|
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Table Table1 = (Table)e.Item.FindControl("Table1");
Table1.Width = Unit.Percentage(30);
Table1.BorderStyle = BorderStyle.Solid;
Table1.BorderWidth = Unit.Pixel(1);
Table1.CellPadding = 0;
Table1.CellSpacing = 0;
TableRow tblRow = new TableRow();
TableCell tblEmptyCell = new TableCell();
tblEmptyCell.Controls.Add(new LiteralControl(String.Empty));
tblEmptyCell.Width =
Unit.Percentage(20 * Convert.ToInt32(((DataRowView)(e.Item.DataItem))["Level"].ToString()));
tblRow.Cells.Add(tblEmptyCell);
TableCell tblCell = new TableCell();
tblCell.Controls.Add(new LiteralControl(((DataRowView)(e.Item.DataItem))["Designation"].ToString()));
tblCell.HorizontalAlign = HorizontalAlign.Left;
tblRow.Cells.Add(tblCell);
Table1.Rows.Add(tblRow);
}
} |
The above code is simple as its need no detail explanation. First we find the Table control inside the Repeater control using its FindControl method, then we customize the Table control by setting its properties such as Width, BorderStyle, BorderWidth, CellPadding and CellSpacing. Next we create a TableRow to add to the Table control and two TableCell objects, that is to be added to the TableRow. The first TableCell object “tblEmptyCell” is responsible to create a tree-like structure by indenting with an empty string and the width is calculated based on the Level field from the database. The second TableCell object “tblCell”, is used to display the Designation value for every record.
Now save all and press the “F5” button, the browser will popup, you can see the data displayed in a hierarchical structure. You can customise the ItemDataBound event as your wish to alter the look and feel of the display. |
