Drag and Drop Support

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.

The following example shows a basic RadTreeView definition and enabled drag/drop feature. To enable the drag and drop, set the IsDragDropEnabled property to True.

Example 1: Enabling the drag and drop feature

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

Figure 1: Drag drop in action

Silverlight RadTreeView Drag drop in action

Example 2: Enabling the Drag/Drop functionality in code-behind

private void EnableDragAndDrop() 
{ 
    radTreeView.IsDragDropEnabled = true; 
} 
Private Sub EnableDragAndDrop() 
    radTreeView.IsDragDropEnabled = True 
End Sub 

In data binding scenario it is recommended to assign an INotifyCollectionChanged implementation (like ObservableCollection<T>) to the ItemsSource of RadTreeView. Otherwise, the drag/drop actions won't be reflected properly in the UI. Additionally, the ItemsSource of the treeview items where drag/drop action will happen should be initialized. In case, the corresponding ItemsSource is null, the drop action won't get executed. Also, if the ItemsSource of RadTreeView or RadTreeViewItem is not an IList implementation, then the drop operation is not allowed.

Enable Drag of Multiple Items

The drag operation is based on the selected items in RadTreeView. To enable dragging of multiple items you will need to enable the multiple selection feature. To do so, set the SelectionMode property of RadTreeView to Multiple or Extended.

Example 3: Turn on multi-selection

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

Example 4: Turn on multi-selection in code-behind

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

Figure 2: Dragging multiple items

Rad Tree View-Drag Drop-Multiple Drag

DragDrop AutoScrolling Behavior

Since Q2 2013, you can take advantage of the built-in auto-scrolling functionality. Moreover, there are a set of properties exposed to allow you to customize the auto-scrolling functionality to better fit your needs.

The auto-scrolling functionality is controlled through the following attached properties:

  • ScrollingSettingsBehavior.IsEnabled: Gets or sets a bool value indicating whether the auto-scrolling behavior is enabled.
  • ScrollingSettingsBehavior.ScrollStep: Gets or sets a double value defining the scrolling offset used to define a single step during the scroll operation.
  • ScrollingSettingsBehavior.ScrollStepTime: Gets or sets a TimeSpan value defining the timeout period between two scroll steps.

This feature is not available with the legacy DragDropExecutionMode.

Drag and Drop Between TreeViews

RadTreeView allows you to automatically drag and drop between two or more RadTreeView instances without the need to implement additional code. To do so, set IsDragDropEnabled property of the corresponding treeview instances.

In order for the drag and drop to work automatically the treeviews should work directly with RadTreeViewItem elements. Or if the ItemsSource is set, the treeviews should contain the same type of objects. Otherwise, some custom conversion code should be implemented.

The following example shows how to use the feature with two RadTreeView instances.

Example 5: Define two RadTreeView controls

<Grid>   
    <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> 
</Grid> 

Figure 3: Dragging items between two treeviews

Rad Tree View-Drag Drop-Tree To Tree

To enable drag/drop between RadTreeView and another control (such as ListBox), you can customize the default drag/drop actions using the DragDropManager. Read more about this in the How To Implement Drag and Drop Between TreeView and ListBox article.

See Also

In this article