We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

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
Preview
Requirements
Overview
Steps

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:

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.

Overview

Conceptual overview of the procedure:

Adding namespace declarations
1. Adding XML namespace declarations to your XAML file
2. Placing using/Imports in your code behind

Configure the xamOrgChart as a Drop Target

Creating the Nodes Drag Sources and Drop Targets

Steps

Add namespace declarations.

Add the XML namespace declaration to your XAML file:

In XAML:
```
xmlns:ig= http://schemas.infragistics.com/xaml
```

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;

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);

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.

Assign an event handler to the NodeControlAttachedEvent.

In XAML:

<ig:XamOrgChart
    NodeControlAttachedEvent="OrgChart_NodeControlAttachedEvent">
</ig:XamOrgChart>

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);
}

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.
}

WPF | Help Topics

Working with Drag and Drop Framework

Introduction

Preview

Requirements

Overview

Steps

Related Topics