Flexible and versatile organisational charts for ASP.NET using
Org Chart Component.


ASP.NET Org Chart Component - Displaying an Org Chart

This simple page shows an XML Organisation Chart Component bound to this XML file of 9 items.

By default the AutoFormating feature will make an intelligent guess as how best to display the org chart.

Developers can also use the HtmlTemplate property to define how to display the chart. The property takes Html and substitutes {field Name} for each item where field Name is the name of an attribute within an XML document or a column name within a datatable. The HtmlTemplate property provides a quick and simple method of formatting organisation charts.

The layout can be also be defined using

  • Templates in Visual Studio.NET
  • Using a Web User Control

Change the HtmlTemplate using the drop down box below to format the org chart.

Select a Layout  

John Smith
CEO
Albert Klien
Financial Director
Alfie Boston
Account Controller
Harold York
Financial Operator
Barry Pinter
Technical Director
Alan Hindes
Team Leader
Kernel Mustard
Designer


Code:

C# Code

   1:  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
   2:      {               
   3:          // User has changed the drop down list, so update the orgchart template
   4:          switch (DropDownList1.SelectedValue)
   5:          {
   6:              case "1": XmlOrgChart.ChartItem.HtmlTemplate = @"{name}";
   7:                  break;
   8:              case "2": XmlOrgChart.ChartItem.HtmlTemplate = @"{name}<br/><B>{JobTitle}</B>";
   9:                  break;
  10:              case "3": XmlOrgChart.ChartItem.HtmlTemplate
  11:                      = @"<div style='border:solid black;width:175px'>Name:{name}</br>Role:<B>{JobTitle}</B></div>";
  12:                  break;
  13:   
  14:              default: XmlOrgChart.ChartItem.HtmlTemplate = null;
  15:                  break;
  16:          }
  17:   
  18:          
  19:          lblHtmlTemplate.Text = Server.HtmlEncode(XmlOrgChart.ChartItem.HtmlTemplate);
  20:          // If the user has selected option 3 then do not show the background image
  21:          XmlOrgChart.ChartItem.ShowBackgroundImage = DropDownList1.SelectedIndex != 3;
  22:   
  23:          // Display the chart
  24:          XmlOrgChart.DataBind();

Html Markup

   1:  <cc1:XmlBoundOrganisationChart ID="XmlOrgChart" DataSourceID="XmlDataSource1" runat="server" Width="860px">                    
   2:  </cc1:XmlBoundOrganisationChart>