Version

Working with Drag and Drop Framework

This topic demonstrates how to implement dragging and dropping with Org Chart and Drag and Drop Framework™.

The topic is organized as follows:

Introduction

When implementing Drag and Drop the underlying data in the hierarchy must be updated manually. This is a requirement of the xamOrgChart™ control so it could reflect the changes.

Preview

Following is a preview of a node being dragged in order to reorganize the hierarchy:

xamOrgChart Drag and Drop 01.png

Figure 1: Dragging a node

Requirements

Required NuGet package references:

  • Infragistics.WPF.OrgChart

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Steps

  1. Add namespace declarations.

    1. Add the XML namespace declaration to your XAML file:

      In XAML:

      xmlns:ig= http://schemas.infragistics.com/xaml
    2. Place using/Imports in your code behind:

      In Visual Basic:

      Imports Infragistics.Controls.Maps
      Imports Infragistics.DragDrop

      In C#:

      using Infragistics.Controls.Maps;
      using Infragistics.DragDrop;
  2. Configure the xamOrgChart as a Drop Target.

    In XAML:

    <ig:XamOrgChart>
        <ig:DragDropManager.DropTarget>
            <ig:DropTarget IsDropTarget="True" />
        </ig:DragDropManager.DropTarget>
    </ig:XamOrgChart>

    In Visual Basic:

    Dim orgChart As New XamOrgChart()
    
    'Create a new DropTarget object.
    Dim dropTarget As New DropTarget()
    dropTarget.IsDropTarget = True
    
    'Make the Org Chart a Drop Target.
    DragDropManager.SetDropTarget(orgChart, dropTarget)

    In C#:

    XamOrgChart orgChart = new XamOrgChart();
    
    //Create a new DropTarget object.
    DropTarget dropTarget = new DropTarget();
    dropTarget.IsDropTarget = true;
    
    //Make the Org Chart a Drop Target.
    DragDropManager.SetDropTarget(orgChart, dropTarget);
  1. Create the Nodes Drag Sources and Drop Targets.

    To work with nodes, the xamOrgChart control uses two key classes:

    • OrgChartNode – its objects are the actual Org Chart nodes. This class carries information about the parent and children nodes, the data displayed by the node, and a reference to the OrgChartNodeLayout object used to create the node.

    • OrgChartNodeControl – its objects serve as visual representations of the OrgChartNode objects

    Therefore, the Drag Sources and Drop Targets are OrgChartNodeControl objects.

    Whenever a node is moved out of the visible area of the Org Chart due to panning, the OrgChartNodeControl related to the node is disposed. Also, when the children of a node are collapsed, their OrgChartNodeControls are disposed.

    If a node has to be shown, a new OrgChartNodeControl associated to the node is created and the NodeControlAttachedEvent is raised.

    If working with Drag and Drop Framework, the DragSource and DropTarget properties must be attached to the OrgChartNodeControl objects when they are created.

    Note
    Note:

    In some scenarios, there might be restrictions about the drop targets of the dragged node (an Employee can only be dropped on a Department). This behavior can be achieved by using Drag and Drop Framework’s Drag and Drop Channels.

    1. Assign an event handler to the NodeControlAttachedEvent.

      In XAML:

      <ig:XamOrgChart
          NodeControlAttachedEvent="OrgChart_NodeControlAttachedEvent">
      </ig:XamOrgChart>
    2. Configure the new OrgChartNodeControl as a Drag Source and Drop Target.

      In Visual Basic:

      Private Sub OrgChart_NodeControlAttachedEvent(sender As Object, e As OrgChartNodeEventArgs)
          'Create a new DragSource object.
          Dim dragSource As New DragSource()
          dragSource.IsDraggable = True
      
          'dragSource.DragChannels = assign drag channels
          AddHandler dragSource.Drop, AddressOf Node_Drop
      
          'Make the Node a Drag Source.
          DragDropManager.SetDragSource(e.Node, dragSource)
      
          'Create a new DropTarget object.
          Dim dropTarget As New DropTarget()
          dropTarget.IsDropTarget = True
      
          'dropTarget.DropChannels = assign drop channels
          'Make the Node a Drop Target.
          DragDropManager.SetDropTarget(e.Node, dropTarget)
      End Sub

      In C#:

      private void OrgChart_NodeControlAttachedEvent(object sender, OrgChartNodeEventArgs e)
      {
          //Create a new DragSource object.
          DragSource dragSource = new DragSource();
          dragSource.IsDraggable = true;
      
          //dragSource.DragChannels = assign drag channels
          dragSource.Drop += Node_Drop;
      
          //Make the Node a Drag Source.
          DragDropManager.SetDragSource(e.Node, dragSource);
      
          //Create a new DropTarget object.
          DropTarget dropTarget = new DropTarget();
          dropTarget.IsDropTarget = true;
      
          //dropTarget.DropChannels = assign drop channels
          //Make the Node a Drop Target.
          DragDropManager.SetDropTarget(e.Node, dropTarget);
      }
    3. Handle the Drop event of the Drag Source.

      In Visual Basic:

      Private Sub Node_Drop(sender As Object, e As DropEventArgs)
          'Get the dragged OrgChartNodeControl object.
          Dim draggedNodeControl As OrgChartNodeControl = _
              TryCast(e.DragSource, OrgChartNodeControl)
      
          'Get the dragged OrgChartNode object.
          Dim draggedNode As OrgChartNode = draggedNodeControl.Node
      
          'Get the underlying data.
          Dim data As Object = draggedNode.Data
      
          'TODO: Modify the underlying data.
      End Sub

      In C#:

      private void Node_Drop(object sender, DropEventArgs e)
      {
          //Get the dragged OrgChartNodeControl object.
          OrgChartNodeControl draggedNodeControl = _
              e.DragSource as OrgChartNodeControl;
      
          //Get the dragged OrgChartNode object.
          OrgChartNode draggedNode = draggedNodeControl.Node;
      
          //Get the underlying data.
          object data = draggedNode.Data;
      
          //TODO: Modify the underlying data.
      }