This topic demonstrates how to bind the Org Chart to data.
The topic is organized as follows:
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
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)
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.
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.
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>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)
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>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.
Figure 5 shows an example of multiple Global Node Layouts.
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>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