Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Generate Genealogy View in ASP.NET C# using Google Organizational Chart

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
24 Jun 2015CPOL2 min read 13.8K   4   6
How to create a genealogy view in ASP.NET C# using Google Organizational Chart

Previously, I have shown you how to create a genealogy view of a family or a treeview in ASP.NET using C#. You can go through that link here. But that process was some kind of orthodox concept to show the data, because we have used a primary structure of HTML table and put a huge code of all the buttons, labels and images present in the HTML table.

But in this article, I will show you how to create a genealogy view of data coming from database with coding of just 20-25 lines. We will use Google organizer chart to create the tree view. Our only motive is to generate the parent and position (left & right) wise data presentation by fetching it from database.

So let's come to the database part first. I cut all other things except name and parent number. If only one child is present, it will show directly under the parent (neither in left nor in right) and two children will show to left and right according to their position in database. So you need to be careful to handle these kinds of small but very effective things when you will do yours.

I will first discuss about the Google organizational chart. Let's check how it works first. Here, I am just pasting the code which will generate the treeview. For more, visit this link.

JavaScript
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Name');
     data.addColumn('string', 'Manager');         
     data.addRows([['Mike',''], ['Jim', 'Mike'], 
     ['Alice', 'Mike'],['Bob','Jim'],['Carol', 'Jim']]); 
     var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
     chart.draw(data, { allowHtml: true });
}
</script>

This code is not similar to the code present in the website. I took only the things that will help me to do the primary things. Others can be added later.

All these codes are basically based on the data. Data pertaining to Mike, Jim, Alice, Bob, etc. So if we can replace it with our value, which is coming from database, then our work will be done. So first let's fetch the data from database and form a string like here.

C#
string s = "";
DataTable table = new DataTable();
table.Columns.Add("name", typeof(string));
table.Columns.Add("parent", typeof(string));
table.Rows.Add("Mike", "");
table.Rows.Add("Jim", "Mike");
table.Rows.Add("Alice", "Mike");
table.Rows.Add("Carol", "Jim");

for (int i = 0; i < table.Rows.Count; i++)
{
     s = s + "['"+table.Rows[i][0].ToString()+"','"+
     table.Rows[i][1].ToString()+"'],";
}
 
s = s.TrimEnd(',');

I only took a DataTable and bind it some dummy data. You need to bind it with SQL to fetch it from DB.

Now our string "s" is ready to launch as a bunch of data to Google organizational chart. Now, how to add this data to JavaScript function to call it or pass it.

The way I did it here, call a JavaScript function which is created within code behind. Let's see how I did this.

C#
String csname1 = "PopupScript";
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
     StringBuilder cstext1 = new StringBuilder();
     cstext1.Append("<script>");
     cstext1.Append("google.setOnLoadCallback(drawChart);");
     cstext1.Append("function drawChart() {");
     cstext1.Append("var data = new google.visualization.DataTable();");
     cstext1.Append("data.addColumn('string', 'Name'); 
     data.addColumn('string', 'Manager');");
     cstext1.Append("data.addRows(["+s+"]);");
     cstext1.Append("var chart = new google.visualization.OrgChart
     (document.getElementById('chart_div'));");
     cstext1.Append("chart.draw(data, { allowHtml: true });");
     cstext1.Append("}");
     cstext1.Append("</script>");
 
     cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());
}

And one more thing, don't forget to add a "chart_div" in the ASPX page. It's the thing which is holding all the tree view.

Output

Download the whole source code here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer PwC
India India
I am a Software developer having an experience of 5 years in application development. To get me you can mail me at arkadeepde@gmail.com or you can visit my blog at ASP With Arka

Comments and Discussions

 
QuestionChildren Pin
Member 167828-Jun-15 0:11
Member 167828-Jun-15 0:11 
AnswerRe: Children Pin
Arkadeep De28-Jun-15 23:14
professionalArkadeep De28-Jun-15 23:14 
GeneralRe: Children Pin
Member 167829-Jun-15 0:29
Member 167829-Jun-15 0:29 
AnswerRe: Children Pin
Arkadeep De29-Jun-15 1:14
professionalArkadeep De29-Jun-15 1:14 
QuestionOriginal Pin
Member 167824-Jun-15 23:56
Member 167824-Jun-15 23:56 
AnswerRe: Original Pin
Arkadeep De25-Jun-15 0:13
professionalArkadeep De25-Jun-15 0:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.