Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

Jan 16, 2015
Introduction:

In this article I will explain how to create a Tree view, or you can say a genealogy view  to show your family in a tree structure. I have tried it before with the help of HTML table. But I found a better option from Google. So here I am explaining how to execute that Google logic in to your project to create your genealogy view, where obviously data is coming from database. Lets come and see how to do this.


Description:

You may be heard of multi-level marketing (MLM) concept. There you have to show the down lines as a tree. Keep that in my mind I have started working on this topic, and I found this most efficient ting to describe the tree view, where one parent has 2 children or more than two children.

Before you proceeding take a look in this URL here  Visualization: Organizational Chart - Google Charts. This will help you to understand on which we are going to implement our tree view.

Before start the project lets create the database first. Here I am taking the basic columns. I have cut all the others less necessary columns.

Name NVarChar(255)
Manager  NVarChar(255)

These two will be our database table column. On these two you add your data like Id, joining date etc..

I am sure you know how to bind a DataTable with database table. So I am not going on that part.

The main thing in this project is the script provided by Google. So lets run that code once.


<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>


Take a deep look on the line no 6. This is the main data contains.If we provide this data from database our mission will be fulfilled. So how to provide. For this we will call this javascript function from code behind, or specifically we will create this function and call this on page load or some button click event.

So lets a create a page and on the page load write down the code.

string s = "";
DataTable table = new DataTable();
table.Columns.Add("name", typeof(string));
table.Columns.Add("parent", typeof(string));

table.Rows.Add("Arka", "");
table.Rows.Add("Sucheta", "Arka");
table.Rows.Add("Ashok", "Arka");
table.Rows.Add("Sayantani", "Sucheta");
table.Rows.Add("Amir", "Sucheta");
table.Rows.Add("Salman", "Ashok");
table.Rows.Add("Shambhu", "Ashok");

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

This code will generate the string which will contain all the data present in our database. I have just create a DataTable and add few data, You just bind that DataTable with database table with the help of SQLDataAdapter. If you put a break point and inspect the variable s you will found the data in s is similar to the matrix in the Google code.

Now we have to call the javascript fucntiona and pass the string to made the tree view.

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());
}

Now more important thing add a div where you want to show the tree view and change the id of that div to chart_div. 

Output:










Run your project and see what will be the output.

Enjoy...Happy coding...



Arkadeep De

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

6 comments :

SUDHAKAR said...

Nice Article Suresh, but you can also give us one or two points of scenario where we can use and where we should not. thanks you so much.

Arkadeep De said...

This mainly used in Multi-level marketing(MLM) software widely. apart from that you can use it where any kind of hierarchy problem is arising.

hope I cleared your confusion.

Gopal Krishna said...

Very helpful article for me

LearnCoding said...

Thanks For Such Code, let me know one thing if i need to Format the Div hows it Possiable

Unknown said...

Not able to download the sample code. even after signing up in the box profile.
Kindly help asap.
can anyone send me the downloaded code onto the mail plz
mail id : chaudharymayank02@gmail.com

Unknown said...

Thank you very much sir ...........
best article

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.