Introduction
This article explains how to create a tree view, or we can say a hierarchical view, structure. We can also do this using a HTML Table but I have a better option from the Google. So this article explains how to execute Google logic to generate a hierarchical view where the data will come from the database.
Before proceeding further just have a look at the URL
Visualization: Organizational Chart. This link will help you to understand how to implement our hierarchical view.
Let's create a project to understand how to use Visualization: Organizational Chart.
Before starting the project, create the database first. I am creating a database and in which I am creating 2 tables, DeptMaster and EmpMaster, such as in the following:
DeptMaster Table![]()
EmpMaster Table
In the
DeptMaster table I have the following departments that were inserted.
![]()
In the
EmpMaster table I have the following employees that were inserted.
![]()
Now create an ASP.NET project and add a webform. Now in the webform create a
div with a
id (
tree_div) and include the CDN of the Google API. You can use the following code:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="HierarchicalViewInASP.Home" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="tree_div"">
-
- </div>
- </div>
- </form>
- </body>
- </html>
And at the code behind use the following code:
- private void BindData()
- {
- string str="";
- string qry = @"select DepartmentName from DeptMaster;select E.Emp_Name,D.DepartmentName from DeptMaster D
- inner join EmpMaster E on E.Dept_ID=D.Dept_id";
- SqlConnection con = new SqlConnection(@"server=.\SQLExpress;DATABASE=HierarchicalRelation;integrated security=true;");
- SqlDataAdapter da = new SqlDataAdapter(qry, con);
- DataSet ds = new DataSet();
- da.Fill(ds);
- foreach (DataRow dr in ds.Tables[0].Rows)
- {
- str = str + "['" + dr["DepartmentName"].ToString() + "','University'],";
- }
- foreach (DataRow dr in ds.Tables[1].Rows)
- {
- str = str + "['" + dr["Emp_Name"].ToString() + "','" + dr["DepartmentName"].ToString() + "'],";
- }
- str.Trim(',');
-
- String csname1 = "PopupScript";
- ClientScriptManager cs = Page.ClientScript;
- if (!cs.IsStartupScriptRegistered(typeof(Button), csname1))
- {
- StringBuilder scriptText = new StringBuilder();
- scriptText.Append("<script>");
- scriptText.Append("google.setOnLoadCallback(drawChart);");
- scriptText.Append("function drawChart() {");
- scriptText.Append("var data = new google.visualization.DataTable();");
- scriptText.Append("data.addColumn('string', 'Name'); data.addColumn('string', 'Manager');");
- scriptText.Append("data.addRows([" + str + "]);");
- scriptText.Append("var chart = new google.visualization.OrgChart(document.getElementById('tree_div'));");
- scriptText.Append("chart.draw(data, { allowHtml: true });");
- scriptText.Append("}");
-
- scriptText.Append("</script>");
-
- cs.RegisterStartupScript(typeof(Button), csname1, scriptText.ToString());
- }
- }
Output
![]()
Happy Coding :)