Generate Multi-Level Diagrams

• Jun 19, 2024
• 2 minutes to read

Both DiagramDataBindingBehavior and DiagramOrgChartBehavior allow you to generate diagrams with composite items: item lists, multi-level containers, etc.

View Example: Generate Diagrams with Grouped Items

Use one of the following properties to generate a multi-level diagram:

DiagramDataBindingBehaviorBase.ItemsPath

Set this property to the name of the data field that contains the collection of nested data items.

DiagramDataBindingBehaviorBase.ItemsSelector

Use this property to dynamically return collections of nested items based on custom logic.

XAML

<local:ChildrenSelector x:Key="childSelector"/>
<!-- ... -->
<dxdiag:DiagramDataBindingBehavior ItemsSelector="{StaticResource ResourceKey=childSelector}"/>

C#

public class ChildrenSelector : IChildrenSelector {
    public IEnumerable<object> GetChildren(object parent) {
        if (parent is Department item)
            return item.Employees;
        else {
            //...
        }
    }
}

VB.NET

Public Class ItemsSelector
    Implements IChildrenSelector

    Public Function GetChildren(ByVal parent As Object) As IEnumerable(Of Object) Implements IChildrenSelector.GetChildren
        If TypeOf parent Is Department Then
            Return CType(parent, Department).Employees
        ElseIf
            ' ...
        End If

    End Function
End Class

You can use one of the following techniques to identify nested data items:

• Assign the field name that uniquely identifies items to the DiagramDataBindingBehaviorBase.KeyMember property. Use this technique if the field name is the same for all nested levels.

  XAML

  <dxdiag:DiagramDataBindingBehavior KeyMember="ItemId"/>
  

• Assign an object that returns item unique identifiers based on custom logic to the DiagramDataBindingBehaviorBase.KeySelector property. Use this technique if root and nested items have different identifier fields or to specify unique identifiers conditionally.

  XAML

  <local:KeySelector x:Key="keySelector"/>
  <!-- ... -->
  <dxdiag:DiagramDataBindingBehavior KeySelector="{StaticResource ResourceKey=keySelector}"/>
  

  C#

  public class KeySelector : IKeySelector {
      object IKeySelector.GetKey(object obj) {
          if (obj is Department department)
              return department.DepartmentId;
          else if (obj is Employee employee)
              return employee.EmployeeId;
          else {
              //...
          }
      }
  }
  

  VB.NET

  Public Class KeySelector
      Implements IKeySelector
  
      Private Function GetKey(ByVal obj As Object) As Object Implements IKeySelector.GetKey
          If TypeOf obj Is Department Then
              Return CType(obj, Department).DepartmentId
          ElseIf TypeOf obj Is Employee Then
              Return CType(obj, Employee).EmployeeId
          ElseIf
              ' ...
          End If
  
      End Function
  End Class
  

To generate different items based on the nested level, use the DiagramDataBindingBehaviorBase.ItemTemplateSelector property or choose items from TemplateDiagram in the DiagramDataBindingBehaviorBase.GenerateItem event handler.

The DiagramControl automatically arranges child items if you place them inside a DiagramList. If you use a DiagramContainer as a parent item, you should arrange its nested items manually.

Refer to the following help topic for more information: Define and Configure Generated Diagram Items.