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.

Code

C# Code

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {               
        // User has changed the drop down list, so update the orgchart template
        switch (DropDownList1.SelectedValue)
        {
            case "1": XmlOrgChart.ChartItem.HtmlTemplate = @"{name}";
                break;
            case "2": XmlOrgChart.ChartItem.HtmlTemplate = @"{name}<br/><B>{JobTitle}</B>";
                break;
            case "3": XmlOrgChart.ChartItem.HtmlTemplate
                    = @"<div style='border:solid black;width:175px'>Name:{name}</br>Role:<B>{JobTitle}</B></div>";
                break;

            default: XmlOrgChart.ChartItem.HtmlTemplate = null;
                break;
        }

        
        lblHtmlTemplate.Text = Server.HtmlEncode(XmlOrgChart.ChartItem.HtmlTemplate);
        // If the user has selected option 3 then do not show the background image
        XmlOrgChart.ChartItem.ShowBackgroundImage = DropDownList1.SelectedIndex != 3;

        // Display the chart
        XmlOrgChart.DataBind();
    }

Html Markup

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

info@orgchartcomponent.com