Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Designer
    Diagram Control
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Collapse]Data Binding Functionality
     Generating Diagrams from a Data Source
     Generating Organization Charts
     Item Template Designer
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Generating Organization Charts

This topic describes how to generate organization charts from a data source. It contains the following sections.

Expanded Overview

The DiagramOrgChartController class provides the organization chart data binding functionality for the DiagramControl. To bind the DiagramControl to data, open its Smart Tag panel and select Add OrgChartController.

To configure the data source, go to the orgChartController1's Smart Tag.

Tip

The Item Template Designer allows you to design templates for diagram items and connectors at design time.

Depending on the type of your data source, the orgChartController must be configured differently.

Expanded Binding to a Self-Referencing Data Source

Each item in the self-referencing data source contains a unique item ID and the ID of its parent.

The following table lists the properties used to map the DiagramControl to self-referencing data.

Member Description
DiagramOrgChartController.DataSource
(via DiagramDataBindingControllerBase.DataSource)
Specifies the path to a collection of diagram items.
DiagramOrgChartController.KeyMember
(via DiagramDataBindingControllerBase.KeyMember)
Specifies the name of the data field that identifies a diagram item.
DiagramOrgChartController.ParentMember Specifies the name of the data field that identifies the parent of a diagram item.

The following example demonstrates the DiagramControl bound to self-referencing data.

Using the Item Template Designer, map the shape's Content property to the Employee.Name.

The following image demonstrates the result.

Expanded Binding to a Hierarchical Data Source

A hierarchical data source usually contains a collection of root items. Each item stores a collection of its subordinates.

The following table lists the properties used to map the DiagramControl to hierarchical data.

Member Description
DiagramOrgChartController.DataSource
(via DiagramDataBindingControllerBase.DataSource)
Specifies the path to a collection of root items.
DiagramOrgChartController.ChildrenPath Specifies the path to the property that contains subordinates of a diagram item.
DiagramOrgChartController.ChildrenSelector Allows choosing an item's subordinates based on custom logic.

The following example demonstrates the DiagramControl bound to hierarchical data.

Using the Item Template Designer, map the shape's Content property to the Employee.Name.

The following image demonstrates the result.

Expanded Expanding and Collapsing Subordinates

When you bind to a large data source, the generated diagram may occupy much space on the canvas. To make the resulting diagram easier to navigate, the DiagramOrgChartController introduces the expand/collapse functionality.

The following properties allow you to configure the expand/collapse behavior.

Property Description
DiagramOrgChartController.ExpandSubordinatesButtonMode Controls the availability of the expand/collapse button.
DiagramOrgChartController.GenerationDepth Specifies the number of hierarchy levels retrieved from the data source when the diagram is generated.
DiagramOrgChartController.ExpansionDepth Specifies the number of hierarchy levels that expand when the diagram is generated.

These options are available from the orgChartController's Smart Tag.

Expanded Video Tutorial

This video demonstrates how to use the Organization Chart functionality to generate relationship diagrams from the data source.

How would you rate this topic?​​​​​​​