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:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="HierarchicalViewInASP.Home" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div>
  13. <div id="tree_div"">
  15. </div>
  16. </div>
  17. </form>
  18. </body>
  19. </html>
And at the code behind use the following code:
  1. private void BindData()
  2. {
  3. string str="";
  4. string qry = @"select DepartmentName from DeptMaster;select E.Emp_Name,D.DepartmentName from DeptMaster D
  5. inner join EmpMaster E on E.Dept_ID=D.Dept_id";
  6. SqlConnection con = new SqlConnection(@"server=.\SQLExpress;DATABASE=HierarchicalRelation;integrated security=true;");
  7. SqlDataAdapter da = new SqlDataAdapter(qry, con);
  8. DataSet ds = new DataSet();
  9. da.Fill(ds);
  10. foreach (DataRow dr in ds.Tables[0].Rows)
  11. {
  12. str = str + "['" + dr["DepartmentName"].ToString() + "','University'],";
  13. }
  14. foreach (DataRow dr in ds.Tables[1].Rows)
  15. {
  16. str = str + "['" + dr["Emp_Name"].ToString() + "','" + dr["DepartmentName"].ToString() + "'],";
  17. }
  18. str.Trim(',');
  20. String csname1 = "PopupScript";
  21. ClientScriptManager cs = Page.ClientScript;
  22. if (!cs.IsStartupScriptRegistered(typeof(Button), csname1))
  23. {
  24. StringBuilder scriptText = new StringBuilder();
  25. scriptText.Append("<script>");
  26. scriptText.Append("google.setOnLoadCallback(drawChart);");
  27. scriptText.Append("function drawChart() {");
  28. scriptText.Append("var data = new google.visualization.DataTable();");
  29. scriptText.Append("data.addColumn('string', 'Name'); data.addColumn('string', 'Manager');");
  30. scriptText.Append("data.addRows([" + str + "]);");
  31. scriptText.Append("var chart = new google.visualization.OrgChart(document.getElementById('tree_div'));");
  32. scriptText.Append("chart.draw(data, { allowHtml: true });");
  33. scriptText.Append("}");
  35. scriptText.Append("</script>");
  37. cs.RegisterStartupScript(typeof(Button), csname1, scriptText.ToString());
  38. }
  39. }
Output


Happy Coding :)