RadControls for WPF
Contents

The Telerik RadTreeView control enhances further your application's capabilities through the rich drag-and-drop functionality. Your users can create and re-order any hierarchical structures and easily perform various drag-and-drop operations.

This tutorial will walk you through the following common tasks:

  • Enable drag and drop behavior declaratively and programmatically.
  • Explain the visual elements of the drag and drop operation.
  • Enable drag of multiple nodes declaratively and programmatically.
  • Disable drop operation on specific item declaratively and programmatically.
  • Disable drag tooltip declaratively and programmatically.
  • Disable drag preview declaratively and programmatically.
  • Disable drop preview line declaratively and programmatically.
  • Using events to manage the drag and drop process.
  • Drag and drop between treeviews.
  • Drag and drop between treeview and other controls (TextBox, DataGrid).

For the purposes of this tutorial will be used the following treeview declaration:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis">
            <telerik:RadTreeViewItem Header="Table Tennis"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Cycling">
            <telerik:RadTreeViewItem Header="Road Cycling"/>
            <telerik:RadTreeViewItem Header="Indoor Cycling"/>
            <telerik:RadTreeViewItem Header="Mountain Bike"/>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Enable Drag and Drop Declaratively

To allow drag and drop functionality in RadTreeView, set the IsDragDropEnabled attribute to True. Find your treeview declaration and add the following attribute:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True">

Enable Drag and Drop Programmatically

The drag and drop behavior can be enabled in the code-behind. In order to do that you need to set the IsDragDropEnabled property of an instance of the RadTreeView class to True.

CopyC#
private void EnableDragAndDrop()
{
    radTreeView.IsDragDropEnabled = true;
}
CopyVB.NET
Private Sub EnableDragAndDrop()
    radTreeView.IsDragDropEnabled = True
End Sub
Tip
If the treeview is bound, it is best to be bound to an ObservableCollection. Otherwise the result of the drag and drop will not be visible. Also the ItemsSource collection of the items to which the leaves nodes of the treeview are bound, need to be initialized as well, otherwise drops in them will not be possible.
Note

If the ItemSource of the RadTreeView (RadTreeViewItem) is not an IList, then the drop operation is not allowed.

Visual Elements of the Drag and Drop Operation

Once enabled, dragging behavior by default allows items to be dropped on other items and between items. A line between the Items will be displayed briefly as a visual indicator that the node can be dropped in the location of the line. See the next figure.

The Drag and Drop operation contains three visual elements (tooltips):

  • Drag Preview
  • Drag Tooltip
  • Drop Preview Line

More details about how to disable each one of the elements you will find later in the topic.

Enable Drag of Multiple Items Declaratively

To allow multiple items to be dragged at one time, you need to set the SelectionMode attribute of the treeview to Multiple. Add the following attribute to your treeview declaration:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True" SelectionMode="Multiple">

Enable Drag of Multiple Items Programmatically

Dragging multiple nodes at once can be enabled in the code-behind. In order to do that you need to set the SelectionMode property of an instance of the RadTreeView classto Multiple.

CopyC#
private void EnableDragOfMultipleNodes()
{
    radTreeView.SelectionMode = Telerik.Windows.Controls.SelectionMode.Multiple;
}
CopyVB.NET
Private Sub EnableDragOfMultipleNodes()
    radTreeView.SelectionMode = Telerik.Windows.Controls.SelectionMode.Multiple
End Sub

Here is the result:

Disable Drop Operation on Specific Item Declaratively

You can further tailor the drag and drop behavior per Node by setting the boolean RadTreeViewItem property IsDropAllowed.

For example, if you want to disable the drop on the treeview item with Header "Tennis", add the following attribute to the treeview item declaration:

CopyXAML
<telerik:RadTreeViewItem Header="Tennis" x:Name="radTreeViewItemTennis" IsDropAllowed="False">

Disable Drop Operation on Specific Item Programmatically

In order to disable drop operation on specific item you should set the IsDropAllowed property of an instance of the RadTreeViewItem classto False.

CopyC#
private void DisableDropOnSpecificItem()
{
    radTreeViewItemTennis.IsDropAllowed = false;
}
CopyVB.NET
Private Sub DisableDropOnSpecificItem()
    radTreeViewItemTennis.IsDropAllowed = False
End Sub

Here is the result:

By default each visual element (drag preview, drop preview line, drag tooltip) of the drag and drop operation is enabled. In the next several sections you will see how to disable each one of them.

Disable Drag Preview Declaratively

In order to disable the Drag Preview you need to set the IsDragPreviewEnabled attribute of the treeview to False. Find your treeview declaration and add the following attribute:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True" IsDragPreviewEnabled="False">

Disable Drag Preview Programmatically

The same operation can be done in the code-behind. In order to do that you need to set the IsDragPreviewEnabled property of an instance of the RadTreeView class to False.

CopyC#
private void DisableDragPreview()
{
    radTreeView.IsDragPreviewEnabled = false;
}
CopyVB.NET
Private Sub DisableDragPreview()
    radTreeView.IsDragPreviewEnabled = False
End Sub

Here is the result. When you drag treeview items, the drag preview element is no longer visible.

Disable Drag Tooltip Declaratively

In order to disable the Drag Tooltip you need to set the IsDragTooltipEnabled attribute of the treeview to False. Find your treeview declaration and add the following attribute:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True"
    IsDragPreviewEnabled="False"
    IsDragTooltipEnabled="False">

Disable Drag Tooltip Programmatically

The same operation can be done in the code-behind. In order to do that you need to set the IsDragTooltipEnabled property of an instance of the RadTreeView class to False.

CopyC#
private void DisableDragTooltip()
{
    radTreeView.IsDragTooltipEnabled = false;
}
CopyVB.NET
Private Sub DisableDragTooltip()
    radTreeView.IsDragTooltipEnabled = False
End Sub

Here is the result. When you drag treeview items, the drag preview and drag tooltip elements are no longer visible.

Disable Drop Preview Line Declaratively

In order to disable the last visual element - the Drag Preview Line you need to set the IsDropPreviewLineEnabled attribute of the treeview to False. Find your treeview declaration and add the following attribute:

CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True"
    IsDragPreviewEnabled="False"
    IsDragTooltipEnabled="False"
    IsDropPreviewLineEnabled="False">

Disable Drop Preview Line Programmatically

The same operation can be done in the code-behind. In order to do that you need to set the IsDropPreviewLineEnabled property of an instance of the RadTreeView class to False.

CopyC#
private void DisableDropPreviewLine()
{
    radTreeView.IsDropPreviewLineEnabled = false;
}
CopyVB.NET
Private Sub DisableDropPreviewLine()
    radTreeView.IsDropPreviewLineEnabled = False
End Sub

Here is the result. When you drag treeview items, all visual elements are disabled (hidden).

Events

The RadTreeView API offers you four events for managing the drag and drop behavior:

  • PreviewDragStarted
  • DragStarted
  • PreviewDragEnded
  • DragEnded
CopyXAML
<telerik:RadTreeView x:Name="radTreeView" IsDragDropEnabled="True"
    PreviewDragStarted="radTreeView_PreviewDragStarted"
    DragStarted="radTreeView_DragStarted"
    PreviewDragEnded="radTreeView_PreviewDragEnded"
    DragEnded="radTreeView_DragEnded">
Note

The RadTreeView actually uses and handles the DragDrop events of the RadDragAndDropManager. In fact, they can be used for managing the drag and drop process, too. You should use the AddHandler() method of the treeview.

CopyC#
public void AddHandler( RoutedEvent routedEvent, Delegate handler, bool handledEventsToo );

CopyVB.NET
Public Sub [AddHandler](ByVal routedEvent As RoutedEvent, ByVal handler As [Delegate], ByVal handledEventsToo As Boolean)
End Sub

When RadTreeView detects a valid drag operation, it generates a PreviewDragStarted and DragStarted routed events. When a valid drop operation (the selected Item is dropped onto another Item or in between Items) is detected, a PreviewDragEnded and DragEnded events are generated. Both PreviewDragStarted and PreviewDragEnded events can be cancelled by setting the Handled property of the event argument to True in the event handler.

CopyC#
private void radTreeView_PreviewDragEnded( object sender, RadTreeViewDragEndedEventArgs e )
{
    e.Handled = true;
}
CopyVB.NET
Private Sub radTreeView_PreviewDragEnded(ByVal sender As Object, ByVal e As RadTreeViewDragEndedEventArgs)
    e.Handled = True
End Sub
Tip

Handling the PreviewDragStarted event will cancel the drag operation. This is equivalent to set the RadTreeView's IsDragDropEnabled property to False.

CopyC#
private void radTreeView_PreviewDragStarted( object sender, RadTreeViewDragEventArgs e )
{
  e.Handled = true;
}

CopyVB.NET
Private Sub radTreeView_PreviewDragStarted(sender As Object, e As RadTreeViewDragEventArgs)
       e.Handled = True
End Sub

Handling the PreviewDragEnded event will cancel the drop operation. This is useful, when you want to cancel adding/removing items from the RadTreeView's ItemsCollection.

CopyC#
private void radTreeView_PreviewDragEnded( object sender, RadTreeViewDragEndedEventArgs e )
{
    e.Handled = true;
}

CopyVB.NET
Private Sub radTreeView_PreviewDragEnded(sender As Object, e As RadTreeViewDragEndedEventArgs)
               e.Handled = True
End Sub

The type of the event arguments for the PreviewDragStarted and DragStarted events is RadTreeViewDragEventArgs. Via the RadTreeViewDragEventArgs you can get access to the items being dragged:

CopyC#
private void radTreeView_DragStarted( object sender, RadTreeViewDragEventArgs e )
{
    Collection<Object> draggedItems = e.DraggedItems;
}
CopyVB.NET
Private Sub radTreeView_DragStarted(ByVal sender As Object, ByVal e As RadTreeViewDragEventArgs)
    Dim draggedItems As Collection(Of [Object]) = e.DraggedItems
End Sub

The type of the event arguments for the PreviewDragEnded and DragEnded events is RadTreeViewDragEndedEventArgs. Via the RadTreeViewDragEndedEventArgs you can get access to the following items and properties:

  • DraggedItems - a collection of Items being dragged (this is useful when multi-selection is enabled - SelectionMode property of the RadTreeView is set to True).
  • DropPosition - indicates the relationship of the Items being dropped and can be a DropPosition enumeration value After, Below or Inside.
  • TargetDropItem - the Item being dragged to.
  • IsCanceled - boolean property, indicates whether the drag and drop operation is cancelled or not.
CopyC#
private void radTreeView_DragEnded( object sender, RadTreeViewDragEndedEventArgs e )
{
    // Get the dragged items.
    Collection<Object> draggedItems = e.DraggedItems;
    // Get the drop position.
    DropPosition dropPosition = e.DropPosition;
    switch ( dropPosition )
    {
        case DropPosition.After:
            MessageBox.Show( "After" );
            break;
        case DropPosition.Before:
            MessageBox.Show( "Before" );
            break;
        case DropPosition.Inside:
            MessageBox.Show( "Inside" );
            break;
    }
    // Get is canceled
    bool isCanceled = e.IsCanceled;
    // Target drop item
    RadTreeViewItem targetDropItem = e.TargetDropItem;
    if ( targetDropItem.Header.ToString() == "Tennis" )
    {
        // Do something
    }
}
CopyVB.NET
Private Sub radTreeView_DragEnded(ByVal sender As Object, ByVal e As RadTreeViewDragEndedEventArgs)
    ' Get the dragged items.
    Dim draggedItems As Collection(Of [Object]) = e.DraggedItems

    ' Get the drop position.
    Dim dropPosition__1 As DropPosition = e.DropPosition
    Select Case dropPosition__1
        Case DropPosition.After
            MessageBox.Show("After")
            Exit Select
        Case DropPosition.Before
            MessageBox.Show("Before")
            Exit Select
        Case DropPosition.Inside
            MessageBox.Show("Inside")
            Exit Select
    End Select

    ' Get is canceled
    Dim isCanceled As Boolean = e.IsCanceled

    ' Target drop item
    Dim targetDropItem As RadTreeViewItem = e.TargetDropItem
    If targetDropItem.Header.ToString() = "Tennis" Then
        ' Do something
    End If
End Sub
Note

The TargetDropItem property may be null if the drop is in an empty treeview. That's why when you use that property it always have to be checked:

CopyC#
private void radTreeView_DragEnded(object sender, RadTreeViewDragEndedEventArgs e)
{
    // Target drop item
    RadTreeViewItem targetDropItem = e.TargetDropItem;
    if (targetDropItem != null && targetDropItem.Header.ToString() == "Tennis" )
    {
        // Do something
    }
}

CopyVB.NET
Private Sub radTreeView_DragEnded(ByVal sender As Object, ByVal e As RadTreeViewDragEndedEventArgs)
    ' Target drop item
        Dim targetDropItem As RadTreeViewItem = e.TargetDropItem

     If targetDropItem IsNot Nothing AndAlso targetDropItem.Header.ToString() = "Tennis" Then
            ' Do something
        End If
End Sub

Drag and Drop Between TreeViews

The Telerik RadTreeView allows you to perform drag and drop between treeviews - this is a default behavior.

For example will be used the same treeview as in the previous topics, but it will be made double:

CopyXAML
<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<telerik:RadTreeView x:Name="radTreeView1" IsDragDropEnabled="True">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis">
            <telerik:RadTreeViewItem Header="Table Tennis"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Cycling">
            <telerik:RadTreeViewItem Header="Road Cycling"/>
            <telerik:RadTreeViewItem Header="Indoor Cycling"/>
            <telerik:RadTreeViewItem Header="Mountain Bike"/>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>
<telerik:RadTreeView x:Name="radTreeView2" Grid.Column="1" IsDragDropEnabled="True">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis">
            <telerik:RadTreeViewItem Header="Table Tennis"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Cycling">
            <telerik:RadTreeViewItem Header="Road Cycling"/>
            <telerik:RadTreeViewItem Header="Indoor Cycling"/>
            <telerik:RadTreeViewItem Header="Mountain Bike"/>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Now you can drag and drop items from one treeview to another:

Tip

Handling the PreviewDragEnded event will cancel the drop operation. This is useful, when you want to cancel adding/removing items from the RadTreeView's ItemsCollection.

CopyC#
private void radTreeView_PreviewDragEnded( object sender, RadTreeViewDragEndedEventArgs e )
{
    e.Handled = true;
}

CopyVB.NET
Private Sub radTreeView_PreviewDragEnded(sender As Object, e As RadTreeViewDragEndedEventArgs)
     e.Handled = True
End Sub

Drag and Drop Between TreeView and Other Controls

The Telerik RadTreeView supports drag and drop behavior between treeview and other controls (for example TextBox or DataGrid). For more information you can read the topic How To Implement Drag and Drop Between TreeView and Other Controls.

See Also