Version

Node Layouts and Binding to Data

This topic demonstrates how to bind the Org Chart to data.

The topic is organized as follows:

Introduction

When passing data to a xamOrgChart™ control, the control needs to know how to bind to it. This is done with Node Layouts. Following are the properties used to bind to data:

  • DisplayMemberPath – the path to the value serving as a visual representation of the source object

  • Key – a property exposing an enumerable object

  • TargetTypeName – the type of the object that the Node Layout tries to match

  • NodeLayouts – a collection of child OrgChartNodeLayout items

Note
Note:

If an Org Chart control has defined Hierarchical and Global Node Layouts, the Global Node Layouts will be ignored.
Note
Note

Hierarchical Node Layouts depend on the Key property and Global Node Layouts depend on the TargetTypeName property to build the organization.
Note
Note:

If an object from the data source contains a reference to itself in its hierarchical branch, an exception will be thrown as such data is not supported.

Using Node Layouts

Hierarchical Node Layouts

When working with Hierarchical Node Layouts, the xamOrgChart control is the root Node Layout. Assuming that the data source is a list of objects, the following code snippet shown below will display a flat, non-expandable list. (Figure 1)

xamOrgChart Node Layouts and Data Binding 01.png

Figure 1: Displaying a flat, non-expandable list

In XAML:

<ig:XamOrgChart DisplayMemberPath="ClassName">
</ig:XamOrgChart>

In order to achieve a hierarchical organization (Figure 2), nested Node Layouts can be defined in the Node Layouts collection. In this case, the value of the Key property refers to a collection on the parent node. The TargetTypeName property is not used.

xamOrgChart Node Layouts and Data Binding 02.png

Figure 2: Displaying a hierarchy using Hierarchical Node Layouts

In XAML:

<ig:XamOrgChart DisplayMemberPath="ClassName">
    <ig:XamOrgChart.NodeLayouts>
        <ig:OrgChartNodeLayout
                Key="Methods"
                DisplayMemberPath="MethodName" />
    </ig:XamOrgChart.NodeLayouts>
</ig:XamOrgChart>

Figure 3 shows an example of multiple Hierarchical Node Layouts.

xamOrgChart Node Layouts and Data Binding 03.png

Figure 3: Displaying a hierarchy using several Hierarchical Node Layouts

In XAML:

<ig:XamOrgChart DisplayMemberPath="ClassName">
    <ig:XamOrgChart.NodeLayouts>
        <ig:OrgChartNodeLayout
                Key="Methods"
                DisplayMemberPath="MethodName">
            <ig:OrgChartNodeLayout.NodeLayouts>
                <!--Define child Node Layouts here-->
            </ig:OrgChartNodeLayout.NodeLayouts>
        </ig:OrgChartNodeLayout>
        <ig:OrgChartNodeLayout
                Key="Interfaces"
                DisplayMemberPath="InterfaceName">
            <ig:OrgChartNodeLayout.NodeLayouts>
                <!--Define child Node Layouts here-->
            </ig:OrgChartNodeLayout.NodeLayouts>
        </ig:OrgChartNodeLayout>
    </ig:XamOrgChart.NodeLayouts>
</ig:XamOrgChart>

Global Node Layouts

Assuming that the data source is a hierarchical set of nested employees, a single Node Layout added to the Global Node Layouts collection will recursively match all nested items. (Figure 4)

xamOrgChart Node Layouts and Data Binding 04.png

Figure 4: Displaying a hierarchy using Global Node Layouts

In XAML:

<ig:XamOrgChart>
    <ig:XamOrgChart.GlobalNodeLayouts>
        <ig:OrgChartNodeLayout
                TargetTypeName="Employee"
                DisplayMemberPath="Name"
                Key="Subordinates" />
    </ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>
Note
Note:

The display of this data source can be also achieved by using several nested Hierarchical Node Layouts – then the number of Node Layouts has to be equal to the depth of the levels of the hierarchy.
Note
Note:

The xamOrgChart control will ignore nested Node Layouts in the Global Node Layouts collection.

When working with Global Node Layouts, the TargetTypeName property is used to match the items from the data source according to their type. The Key property is not used.

Note
Note:

If there are several Node Layouts with the same TargetTypeName, only the first one is used.

Figure 5 shows an example of multiple Global Node Layouts.

xamOrgChart Node Layouts and Data Binding 05.png

Figure 5: Displaying a hierarchy using several Global Node Layouts

In XAML:

<ig:XamOrgChart>
    <ig:XamOrgChart.GlobalNodeLayouts>
        <ig:OrgChartNodeLayout
            TargetTypeName="Department"
            DisplayMemberPath="DepartmentName"
            Key="EmployeePositions" />
        <ig:OrgChartNodeLayout
            TargetTypeName="EmployeePosition"
            DisplayMemberPath="PositionName"
            Key="Employees" />
        <ig:OrgChartNodeLayout
            TargetTypeName="Employee"
            DisplayMemberPath="FullName" />
    </ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>

Manually Selecting Node Layouts

Whenever an item from the data source is matched with a Node Layout object, the NodeLayoutAssigned event is raised. This allows for an evaluation of the type of the item and assigning a different Node Layout object.

In XAML:

<ig:XamOrgChart NodeLayoutAssigned="OrgChart_NodeLayoutAssigned">
</ig:XamOrgChart>

In C#:

private void OrgChart_NodeLayoutAssigned(object sender, NodeLayoutAssignedEventArgs e)
{
    if (e.DataType.Name == "Employee")
    {
        //Assign a different node layout.
        e.NodeLayout = differentNodeLayout;
    }
}

In Visual Basic:

Private Sub OrgChart_NodeLayoutAssigned(sender As Object, e As NodeLayoutAssignedEventArgs)
    If e.DataType.Name = "Employee" Then
        'Assign a different node layout.
        e.NodeLayout = differentNodeLayout
    End If
End Sub

Related Topics

Using xamOrgChart