Programming the Org Chart Component In C#

This page lists provides some samples, hints and tips for programming orgchart in c# .net.  Although all the examples here are in C# they are equally applicable to any other .NET language such as VB.NET and many of the properties shown can be set directly via the Visual Studio property editor.

Example 1. Binding the Org Chart to directly to a data table

        // Step 1. Create a new data table
        DataTable MyTable = new DataTable();

        // Step2. Fill it with some data
        FillMeWithData(MyTable);

        // Step 3. Set the DataSource property to the DataTable
        MyOrgChart.DataSource = MyTable;

        // Step 4. Set the PrimaryKey, ParentField and StartValue properties
        // by default these are "UniqueId" and "ParentId" and "1"

        MyOrgChart.PrimaryKey = "Id";
        MyOrgChart.ParentField = "ParentId";
        MyOrgChart.StartValue = 1;

Example 2. Styling the OrgChart Line

   // The line colour and height can be set using the properties LineColour
       and VerticalLineHeight.
        
        MyOrgChart.LineColour = OrgChart.Core.LineColour.Gray;    // Sets
            the colour to one of the built colours
        MyOrgChart.VerticalLineHeight = 50;                       // Controls
            the height of the vertical lines 
        MyOrgChart.LineWidth = 3;                                 // Controls the width of the chart line

Example 3. Using a custom background image

// First set the image url
        MyOrgChart.ChartItem.ImageUrl = "background.png";
        // To correctly display an org chart using a custom background image
            it is important
        // to set the height and width of image being used.
        MyOrgChart.ChartItem.ItemStyle.Height = new Unit(60, UnitType.Pixel);   
        MyOrgChart.ChartItem.ItemStyle.Width = new Unit(120, UnitType.Pixel);
        // Finally ensure that the component is displaying background images
        MyOrgChart.ChartItem.ShowBackgroundImage = true;                    

Example 4. Using the HtmlTemplate property

 // This property is useful for quickly styling or displaying an orgachart.
 // The property takes an HTML string and will substitute data values.

        MyOrgChart.ChartItem.HtmlTemplate = "<i><b>{name}</b></i>";

Example 5. Using Events To Control The Appearance of The Organisation Chart

        // This event fires as the OrgChartItem is created. 
        MyOrgChart.ItemCreated += new OrganisationChartItemEventHandler(ItemCreated);

        // This event is fired after the Item is created and databound but
            before it is rendered.
        // This is the last opportunity to alter the Items appearnace.
        MyOrgChart.ItemPreRender += new OrganisationChartItemEventHandler(ItemPreRender);

        // This event is fired if the end user presses the "Select" Item button.
        MyOrgChart.ItemSelected += new OrganisationChartItemCommandEventHandler(MyOrgChart_ItemSelected);

Once bound to an event a programmer can control the appearance of the ChartItems by implementing an event handler

 // The Item Selected Event Handler
    // This event handler is invoked when an end user selects one of the
        items in the Organisation Chart
    void MyOrgChart_ItemSelected(object sender, OrganisationChartItemCommandEventArgs e)
    {
        // The page developer has access to the data via e.DataItem and the
            OrgChartItem via the e.Item properties 
        // In this example we simply write out the primary key of the selected
            item.
        Response.Write("Data Item With A UniqueId of " + e.Item.ItemId + " has been selected<BR>");
    }

Example 6. Using the Navigation Bar

// The navigation bar is drawn at the top of each Org Chart Item.
        // It provides the end users with the ability to control the organisation
            chart

        // First show the navigation bar
        MyOrgChart.NavigationBarSettings.Visible = true;

        // Set the icon button size
        MyOrgChart.NavigationBarSettings.IconSize = OrgChart.Core.CommandBar.CommandBarIconSize.Small;

        // Change the border appearance
        MyOrgChart.NavigationBarSettings.NavBarStyle.BorderColor = Color.Gainsboro;
        MyOrgChart.NavigationBarSettings.NavBarStyle.BorderStyle = BorderStyle.Inset;
        MyOrgChart.NavigationBarSettings.NavBarStyle.BorderWidth = new Unit(1, UnitType.Pixel);
        MyOrgChart.NavigationBarSettings.NavBarStyle.Width = new Unit(120, UnitType.Pixel);

        // Show the "Hide Peers" and "Select" buttons
        MyOrgChart.NavigationBarSettings.ShowHidePeersButton = true;
        MyOrgChart.NavigationBarSettings.ShowSelectButton = true;

Example 7. Limiting the chart depth.

// The Org Chart will stop displaying after the 3rd level.
        MyOrgChart.MaximumDepth = 3;    

Example 8. Enabling the Stacking Algorithmn

// In order to conserve space and display more data on a single web page the org chart provides the ability
// to display lower branches of the tree in a "stack" 
// To do this we enable the StackTemplate

        MyOrgChart.StackItem.Enabled = true;        // Turn on the stacking algorithm
        MyOrgChart.StackItem.StackDepth = 3;                // The depth from which the chart will start stacking.
        MyOrgChart.StackItem.HtmlTemplate = "{name}";       // Just display the name
        MyOrgChart.StackItem.ShowBackgroundImage = false;   // Don't display a background

Example 9. Enabling the Sumary Template

// In order to conserve space and display more data on a single web page the org chart provides the ability to 
// display lower branches of the tree using the "summary" templates
// The page designer would use a summary template to display a minimal set of information about the current 
// chart item

        MyOrgChart.SummaryItem.UseSummaryTemplate = true;   // Turns on the summary template
        MyOrgChart.SummaryItem.SummaryDepth = 2;            // The depth from which the org chart component will start
                                                            // using the Summary Template

Example 10. Framing the Org Chart

 // The page developer can turn on the frame and set the chart title using these properties

        MyOrgChart.ShowFrame = true;
        MyOrgChart.ChartTitle = "<B>This is my OrgChart</B>";

Example 11. Headers and Footers

// The Org Chart Component supports a header and a footer. 
// These can either be defined with the template editor in Visual Studio 
// or created with the following properties

        MyOrgChart.ChartHeadingHTML = "<b>This is the chart header</b>";

        MyOrgChart.ChartFooterHTML= "<b>This is the chart footer</b>";

Example 12. The Command Bar

 // The Command bar is used to allow the end user to manipulate the appearance of the Org Chart.

        // Show the command bar
        MyOrgChart.CommandBarSettings.Visible = true;

        // Set a custom title
        MyOrgChart.CommandBarSettings.Title = "My Commands";
        // Show the "Stack" Checkbox.  This allows end users to enable the stacking functionality
        MyOrgChart.CommandBarSettings.ShowStack = true;

        // Show the "Summary" Checkbox. This allows end users to Switch on the summary functionality
        MyOrgChart.CommandBarSettings.ShowSummary = true;