Version

Adding xamOrgChart Using Procedural Code

This topic explains how to add the xamOrgChart™ using procedural (C#, VB) code. At the end, the full procedural code is provided in a separate section. Before attempting the procedure, make sure you have met the requirements listed in the Adding xamOrgChart to Your Application topic.

Overview

Conceptual overview of the adding procedure:

  1. Add the xamOrgChart control to your application and bind it to the data model.

  1. Add Node Layouts to the Org Chart.

Steps

  1. Add the xamOrgChart control to your application and bind it to the data model.

    1. Add an event handler to the UserControl’s Loaded event.

      In XAML:

      <UserControl Loaded="UserControl_Loaded">

    2. Place using/Imports in your code behind.

      In Visual Basic:

      Imports Infragistics.Controls.Maps
Imports UsingXamOrgChart

      In C#:

      using Infragistics.Controls.Maps;
using UsingXamOrgChart;

    3. Inside the UserControl_Loaded event handler, create an instance of the xamOrgChart control with a DataContext bound to a DepartmentViewModel object and an ItemsSource bound to the Departments property. Add the new instance of xamOrgChart to the Grid panel’s Children collection (note that upon initial creation, a grid panel called “LayoutRoot” is defined by default).

      In Visual Basic:

      Dim data As New DepartmentViewModel()

Dim OrgChart As New XamOrgChart()
OrgChart.DataContext = data
OrgChart.ItemsSource = data.Departments

Me.LayoutRoot.Children.Add(OrgChart)

      In C#:

      DepartmentViewModel data = new DepartmentViewModel();

XamOrgChart Org Chart = new XamOrgChart();
OrgChart.DataContext = data;
OrgChart.ItemsSource = data.Departments;

this.LayoutRoot.Children.Add(OrgChart);

  1. Add Node Layouts to the Org Chart.

    Create Node Layout instances and add them to the xamOrgChart control’s GlobalNodeLayouts collection.

    In Visual Basic:

    Dim departmentNodeLayout As New OrgChartNodeLayout()
departmentNodeLayout.TargetTypeName = "Department"
departmentNodeLayout.DisplayMemberPath = "Name"
departmentNodeLayout.Key = "EmployeePositions"

Dim positionNodeLayout As New OrgChartNodeLayout()
positionNodeLayout.TargetTypeName = "EmployeePosition"
positionNodeLayout.DisplayMemberPath = "JobTitle"
positionNodeLayout.Key = "Employees"

Dim employeeNodeLayout As New OrgChartNodeLayout()
employeeNodeLayout.TargetTypeName = "Employee"
employeeNodeLayout.DisplayMemberPath = "FirstName"

OrgChart.GlobalNodeLayouts.Add(departmentNodeLayout)
OrgChart.GlobalNodeLayouts.Add(positionNodeLayout)
OrgChart.GlobalNodeLayouts.Add(employeeNodeLayout)

    In C#:

    OrgChartNodeLayout departmentNodeLayout = new OrgChartNodeLayout();
departmentNodeLayout.TargetTypeName = "Department";
departmentNodeLayout.DisplayMemberPath = "Name";
departmentNodeLayout.Key = "EmployeePositions";

OrgChartNodeLayout positionNodeLayout = new OrgChartNodeLayout();
positionNodeLayout.TargetTypeName = "EmployeePosition";
positionNodeLayout.DisplayMemberPath = "JobTitle";
positionNodeLayout.Key = "Employees";

OrgChartNodeLayout employeeNodeLayout = new OrgChartNodeLayout();
employeeNodeLayout.TargetTypeName = "Employee";
employeeNodeLayout.DisplayMemberPath = "FirstName";

OrgChart.GlobalNodeLayouts.Add(departmentNodeLayout);
OrgChart.GlobalNodeLayouts.Add(positionNodeLayout);
OrgChart.GlobalNodeLayouts.Add(employeeNodeLayout);

Code Samples: Full Procedural Code

In Visual Basic:

Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
   Dim data As New DepartmentViewModel()

   Dim OrgChart As New XamOrgChart()
   OrgChart.DataContext = data
   OrgChart.ItemsSource = data.Departments

   Me.LayoutRoot.Children.Add(OrgChart)

   Dim departmentNodeLayout As New OrgChartNodeLayout()
   departmentNodeLayout.TargetTypeName = "Department"
   departmentNodeLayout.DisplayMemberPath = "Name"
   departmentNodeLayout.Key = "EmployeePositions"

   Dim positionNodeLayout As New OrgChartNodeLayout()
   positionNodeLayout.TargetTypeName = "EmployeePosition"
   positionNodeLayout.DisplayMemberPath = "JobTitle"
   positionNodeLayout.Key = "Employees"

   Dim employeeNodeLayout As New OrgChartNodeLayout()
   employeeNodeLayout.TargetTypeName = "Employee"
   employeeNodeLayout.DisplayMemberPath = "FirstName"

   OrgChart.GlobalNodeLayouts.Add(departmentNodeLayout)
   OrgChart.GlobalNodeLayouts.Add(positionNodeLayout)
   OrgChart.GlobalNodeLayouts.Add(employeeNodeLayout)
End Sub

In C#:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
   DepartmentViewModel data = new DepartmentViewModel();

   XamOrgChart Org Chart = new XamOrgChart();
   OrgChart.DataContext = data;
   OrgChart.ItemsSource = data.Departments;

   this.LayoutRoot.Children.Add(OrgChart);

   OrgChartNodeLayout departmentNodeLayout = new OrgChartNodeLayout();
   departmentNodeLayout.TargetTypeName = "Department";
   departmentNodeLayout.DisplayMemberPath = "Name";
   departmentNodeLayout.Key = "EmployeePositions";

   OrgChartNodeLayout positionNodeLayout = new OrgChartNodeLayout();
   positionNodeLayout.TargetTypeName = "EmployeePosition";
   positionNodeLayout.DisplayMemberPath = "JobTitle";
   positionNodeLayout.Key = "Employees";

   OrgChartNodeLayout employeeNodeLayout = new OrgChartNodeLayout();
   employeeNodeLayout.TargetTypeName = "Employee";
   employeeNodeLayout.DisplayMemberPath = "FirstName";

   OrgChart.GlobalNodeLayouts.Add(departmentNodeLayout);
   OrgChart.GlobalNodeLayouts.Add(positionNodeLayout);
   OrgChart.GlobalNodeLayouts.Add(employeeNodeLayout);
}

Related Topics

Adding xamOrgChart to Your Application

Adding xamOrgChart Using XAML Code

Understanding xamOrgChart

Using xamOrgChart

API Overview