[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Collapse]Diagram Control
    Getting Started
   [Expand]Diagram Control
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Collapse]Data Binding
     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]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Generating Organization Charts

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

Expanded Overview

The DiagramOrgChartBehavior class provides the organization chart data binding behavior for the DiagramControl. To bind the DiagramControl to data, open its Smart Tag panel and select DiagramOrgChartBehavior.

The following XAML will be generated.

To configure the data source, go to the Smart Tag panel's MVVM Behaviors tab.

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

DiagramOrgChartBehavior.ItemsSource

(via DiagramDataBindingBehaviorBase.ItemsSource)

Specifies the path to a collection of diagram items.

DiagramDataBindingBehaviorBase.KeyMember

Specifies the name of the data field that identifies a diagram item.

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

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

DiagramOrgChartBehavior.ItemsSource

(via DiagramDataBindingBehaviorBase.ItemsSource)

Specifies the path to a collection of root items.

DiagramOrgChartBehavior.ChildrenPath

Specifies the path to the property that contains subordinates of a diagram item.

DiagramOrgChartBehavior.ChildrenSelector

Allows choosing an item's subordinates based on custom logic.

The following example demonstrates the DiagramControl bound to hierarchical data.

Expanded Expanding and Collapsing Subordinates

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

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

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

The following example demonstrates an organization chart that displays three hierarchy levels. Additional shapes are generated and displayed when an end-user clicks the expand button.

Expanded Video Tutorial

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

Is this topic helpful?​​​​​​​