Generate Organization Charts

• Jan 28, 2024
• 6 minutes to read

This topic describes how to bind the DiagramControl to a hierarchical data source.

Tip

Refer to the Generate Diagrams from a Data Source topic for information on how to bind the DiagramControl to a data source with an arbitrary structure.

Add the Behavior

The DiagramOrgChartBehavior is used to bind the DiagramControl to organization chart data. To add the behavior, open the DiagramControl’s Quick Actions and select DiagramOrgChartBehavior.

The following XAML is generated.

XAML

<dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
    <dxmvvm:Interaction.Behaviors>
        <dxdiag:DiagramOrgChartBehavior />
    </dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramControl>

To configure the data source, switch to the Quick Actions’s Behaviors tab.

Tip

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

Configure the binding according to the data source type:

• Bind to a Self-Referencing Data Source
• Bind to a Hierarchical Data Source

Bind to a Self-Referencing Data Source

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

The following table lists the properties that 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.

XAML

<Window ...
        xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram" 
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" >
    <Window.DataContext>
        <local:OrgChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
            <dxmvvm:Interaction.Behaviors>
                <dxdiag:DiagramOrgChartBehavior ItemsSource="{Binding Data}" KeyMember="Id" ParentMember="ParentId">
                    <dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
                        <dxdiag:DiagramControl SelectedStencils="TemplateDesigner">
                            <dxdiag:DiagramShape Height="50"  Width="100">
                                <dxdiag:DiagramShape.Bindings>
                                    <dxdiag:DiagramBinding Expression="Name" PropertyName="Content" />
                                </dxdiag:DiagramShape.Bindings>
                            </dxdiag:DiagramShape>
                            <dxdiag:DiagramConnector Type="RightAngle"/>
                        </dxdiag:DiagramControl>
                    </dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
                </dxdiag:DiagramOrgChartBehavior>
            </dxmvvm:Interaction.Behaviors>
        </dxdiag:DiagramControl>
    </Grid>
</Window>

C#

public class OrgChartViewModel {
    public List<Employee> Data { get; set; }
    public OrgChartViewModel() {
        Data = new List<Employee>();
        Data.Add(new Employee() { Id = 0, Name = "Carl" });
        Data.Add(new Employee() { Id = 1, ParentId = 0, Name = "Bob" });
        Data.Add(new Employee() { Id = 2, ParentId = 1, Name = "Ann" });
        Data.Add(new Employee() { Id = 3, ParentId = 1, Name = "Jack" });
    }
}
public class Employee {
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
}

VB.NET

 Public Class OrgChartViewModel
    Public Property Data() As List(Of Employee)
    Public Sub New()
        Data = New List(Of Employee)()
        Data.Add(New Employee() With {
            .Id = 0,
            .Name = "Carl"
        })
        Data.Add(New Employee() With {
            .Id = 1,
            .ParentId = 0,
            .Name = "Bob"
        })
        Data.Add(New Employee() With {
            .Id = 2,
            .ParentId = 1,
            .Name = "Ann"
        })
        Data.Add(New Employee() With {
            .Id = 3,
            .ParentId = 1,
            .Name = "Jack"
        })
    End Sub
End Class
Public Class Employee
    Public Property Id() As Integer
    Public Property ParentId() As Integer
    Public Property Name() As String
End Class

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

XAML

<Window ...
        xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram" 
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" >
    <Window.DataContext>
        <local:OrgChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
            <dxmvvm:Interaction.Behaviors>
                <dxdiag:DiagramOrgChartBehavior ItemsSource="{Binding Data}" ChildrenPath="Children">
                    <dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
                        <dxdiag:DiagramControl SelectedStencils="TemplateDesigner">
                            <dxdiag:DiagramShape Height="50"  Width="100">
                                <dxdiag:DiagramShape.Bindings>
                                    <dxdiag:DiagramBinding Expression="Name" PropertyName="Content" />
                                </dxdiag:DiagramShape.Bindings>
                            </dxdiag:DiagramShape>
                            <dxdiag:DiagramConnector Type="RightAngle"/>
                        </dxdiag:DiagramControl>
                    </dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
                </dxdiag:DiagramOrgChartBehavior>
            </dxmvvm:Interaction.Behaviors>
        </dxdiag:DiagramControl>
    </Grid></Window>

C#

public class OrgChartViewModel {
    public List<Employee> Data { get; set; }
    public OrgChartViewModel() {
        Data = new List<Employee>();
        Employee emp = new Employee() { Name = "Carl", Children = new List<Employee>() };
        emp.Children.Add(new Employee() { Name = "Ann" });
        emp.Children.Add(new Employee() { Name = "Bob" });
        Data.Add(emp);
    }
}
public class Employee {
    public string Name { get; set; }
    public List<Employee> Children { get; set; }
}

VB.NET

 Public Class OrgChartViewModel
    Public Property Data() As List(Of Employee)
    Public Sub New()
        Data = New List(Of Employee)()
        Dim emp As New Employee() With {
            .Name = "Carl",
            .Children = New List(Of Employee)()
        }
        emp.Children.Add(New Employee() With {.Name = "Ann"})
        emp.Children.Add(New Employee() With {.Name = "Bob"})
        Data.Add(emp)
    End Sub
End Class
Public Class Employee
    Public Property Name() As String
    Public Property Children() As List(Of Employee)
End Class

Expand and Collapse 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.

XAML

<dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
    <dxmvvm:Interaction.Behaviors>
        <dxdiag:DiagramOrgChartBehavior ItemsSource="{Binding Data}" KeyMember="Id" ParentMember="ParentId" 
                                        GenerationDepth="2" ExpansionDepth="2" ExpandSubordinatesButtonMode="AlwaysVisible">
            <dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
                <dxdiag:DiagramControl SelectedStencils="TemplateDesigner">
                    <dxdiag:DiagramShape Height="50"  Width="100">
                        <dxdiag:DiagramShape.Bindings>
                            <dxdiag:DiagramBinding Expression="Name" PropertyName="Content" />
                        </dxdiag:DiagramShape.Bindings>
                    </dxdiag:DiagramShape>
                    <dxdiag:DiagramConnector Type="RightAngle"/>
                </dxdiag:DiagramControl>
            </dxdiag:DiagramOrgChartBehavior.TemplateDiagram>
        </dxdiag:DiagramOrgChartBehavior>
    </dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramControl>

C#

public class OrgChartViewModel {
    public List<Employee> Data { get; set; }
    public OrgChartViewModel() {
        Data = new List<Employee>();
        Data.Add(new Employee() { Id = 0, Name = "Laura" });
        Data.Add(new Employee() { Id = 1, ParentId = 0, Name = "Bob" });
        Data.Add(new Employee() { Id = 2, ParentId = 1, Name = "Audrey" });
        Data.Add(new Employee() { Id = 3, ParentId = 1, Name = "Jack" });
        Data.Add(new Employee() { Id = 4, ParentId = 3, Name = "Mike" });
        Data.Add(new Employee() { Id = 5, ParentId = 3, Name = "Ben" });
    }
}
public class Employee {
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
}

VB.NET

 Public Class OrgChartViewModel
    Public Property Data() As List(Of Employee)
    Public Sub New()
        Data = New List(Of Employee)()
        Data.Add(New Employee() With {
            .Id = 0,
            .Name = "Laura"
        })
        Data.Add(New Employee() With {
            .Id = 1,
            .ParentId = 0,
            .Name = "Bob"
        })
        Data.Add(New Employee() With {
            .Id = 2,
            .ParentId = 1,
            .Name = "Audrey"
        })
        Data.Add(New Employee() With {
            .Id = 3,
            .ParentId = 1,
            .Name = "Jack"
        })
        Data.Add(New Employee() With {
            .Id = 4,
            .ParentId = 3,
            .Name = "Mike"
        })
        Data.Add(New Employee() With {
            .Id = 5,
            .ParentId = 3,
            .Name = "Ben"
        })
    End Sub
End Class
Public Class Employee
    Public Property Id() As Integer
    Public Property ParentId() As Integer
    Public Property Name() As String
End Class

Example

View Example

Video Tutorial

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