How to: Implement Drag-and-Drop Between the GridControl and Other Controls

• Jun 07, 2019
• 8 minutes to read

This example demonstrates how to implement drag-and-drop between the GridControl and other controls that don’t have built-in drag-and-drop functionality. See the following topic to learn more: Drag-and-Drop Between GridControl and Other Controls.

The image below shows the result:

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-implement-drag-and-drop-between-the-gridcontrol-and-other-controls-t566741.

MainWindow.xaml.vb

Imports System.Windows
Imports System.Collections.ObjectModel
Imports System.Windows.Controls
Imports System.Collections.Generic
Imports System.Windows.Input
Imports System.Collections
Imports System.Windows.Media
Imports DevExpress.Xpf.Core

Namespace How_to_Drag_and_Drop_Between_GridControl_and_Other_Controls
    Partial Public Class MainWindow
        Inherits Window

        Public Class Employee
            Public Property ID() As Integer
            Public Property Name() As String
            Public Property Position() As String
            Public Property Department() As String
            Public Overrides Function ToString() As String
                Return Name
            End Function
        End Class

        Public NotInheritable Class Stuff

            Private Sub New()
            End Sub

            Public Shared Function GetStuff() As ObservableCollection(Of Employee)

                Dim stuff_Renamed As New ObservableCollection(Of Employee)()
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 1, _
                    .Name = "Gregory S. Price", _
                    .Department = "", _
                    .Position = "President" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 2, _
                    .Name = "Irma R. Marshall", _
                    .Department = "Marketing", _
                    .Position = "Vice President" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 3, _
                    .Name = "John C. Powell", _
                    .Department = "Operations", _
                    .Position = "Vice President" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 4, _
                    .Name = "Christian P. Laclair", _
                    .Department = "Production", _
                    .Position = "Vice President" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 5, _
                    .Name = "Karen J. Kelly", _
                    .Department = "Finance", _
                    .Position = "Vice President" _
                })

                stuff_Renamed.Add(New Employee() With { _
                    .ID = 6, _
                    .Name = "Brian C. Cowling", _
                    .Department = "Marketing", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 7, _
                    .Name = "Thomas C. Dawson", _
                    .Department = "Marketing", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 8, _
                    .Name = "Angel M. Wilson", _
                    .Department = "Marketing", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 9, _
                    .Name = "Bryan R. Henderson", _
                    .Department = "Marketing", _
                    .Position = "Manager" _
                })

                stuff_Renamed.Add(New Employee() With { _
                    .ID = 10, _
                    .Name = "Harold S. Brandes", _
                    .Department = "Operations", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 11, _
                    .Name = "Michael S. Blevins", _
                    .Department = "Operations", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 12, _
                    .Name = "Jan K. Sisk", _
                    .Department = "Operations", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 13, _
                    .Name = "Sidney L. Holder", _
                    .Department = "Operations", _
                    .Position = "Manager" _
                })

                stuff_Renamed.Add(New Employee() With { _
                    .ID = 14, _
                    .Name = "James L. Kelsey", _
                    .Department = "Production", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 15, _
                    .Name = "Howard M. Carpenter", _
                    .Department = "Production", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 16, _
                    .Name = "Jennifer T. Tapia", _
                    .Department = "Production", _
                    .Position = "Manager" _
                })

                stuff_Renamed.Add(New Employee() With { _
                    .ID = 17, _
                    .Name = "Judith P. Underhill", _
                    .Department = "Finance", _
                    .Position = "Manager" _
                })
                stuff_Renamed.Add(New Employee() With { _
                    .ID = 18, _
                    .Name = "Russell E. Belton", _
                    .Department = "Finance", _
                    .Position = "Manager" _
                })
                Return stuff_Renamed
            End Function
        End Class

        Public Sub New()
            InitializeComponent()
            gridControl.ItemsSource = Stuff.GetStuff()
        End Sub

        Private Overloads Sub OnDragEnter(ByVal sender As Object, ByVal e As DragEventArgs)
            If e.Data.GetDataPresent(GetType(RecordDragDropData)) Then
                Dim textBlock As TextBlock = DirectCast(sender, TextBlock)
                textBlock.Background = Brushes.SkyBlue
                e.Handled = True
            End If
        End Sub

        Private Overloads Sub OnDragLeave(ByVal sender As Object, ByVal e As DragEventArgs)
            Dim textBlock As TextBlock = DirectCast(sender, TextBlock)
            textBlock.Background = Nothing
            textBlock.DataContext = Nothing
            e.Handled = True
        End Sub

        Private Overloads Sub OnDrop(ByVal sender As Object, ByVal e As DragEventArgs)
            If e.Data.GetDataPresent(GetType(RecordDragDropData)) Then
                Dim textBlock As TextBlock = DirectCast(sender, TextBlock)
                Dim data As Object = e.Data.GetData(GetType(RecordDragDropData))
                Dim employees() As Object = DirectCast(data, RecordDragDropData).Records
                textBlock.DataContext = CType(DirectCast(employees, IList)(0), Employee)
            End If
        End Sub

        Private Overloads Sub OnPreviewMouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            Dim textBlock As TextBlock = DirectCast(sender, TextBlock)
            If textBlock.DataContext IsNot Nothing Then
                DragDrop.DoDragDrop(textBlock, textBlock.DataContext, DragDropEffects.Move)
            End If
        End Sub

        Private Sub OnDragRecordOver(ByVal sender As Object, ByVal e As DragRecordOverEventArgs)
            If e.IsFromOutside AndAlso e.Data.GetDataPresent(GetType(Employee)) Then
                e.Effects = DragDropEffects.Move
                e.Handled = True
            End If
        End Sub

        Private Sub OnDropRecord(ByVal sender As Object, ByVal e As DropRecordEventArgs)
            If e.IsFromOutside AndAlso e.Data.GetDataPresent(GetType(Employee)) Then
                Dim data As Object = e.Data.GetData(GetType(Employee))
                Dim employee As Employee = DirectCast(data, Employee)
                e.Data.SetData(New RecordDragDropData(New List(Of Employee)() From {employee}.ToArray()))
            End If
        End Sub
    End Class
End Namespace

Application.xaml.vb

' Developer Express Code Central Example:
' How to enable Drag and Drop feature in the TableView
' 
' This example shows how to enable Drag and Drop functionality in the
' TableView.
' 
' Please note that if you wish to enable this functionality, it is
' necessary to add a reference to the DevExpress.Xpf.Grid.v12.2.Extensions
' assembly.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3918

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace How_to_Drag_and_Drop_Between_GridControl_and_Other_Controls
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

Application.xaml

<Application x:Class="How_to_Drag_and_Drop_Between_GridControl_and_Other_Controls.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

MainWindow.xaml

<Window x:Class="How_to_Drag_and_Drop_Between_GridControl_and_Other_Controls.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        Title="MainWindow" Height="350" Width="750">
    <Window.Resources>
        <Style TargetType="Label">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="5" />
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="Width" Value="110" />
            <Setter Property="IsReadOnly" Value="True" />
            <Setter Property="Margin" Value="5" />
        </Style>        
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="350"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <dxg:GridControl Name="gridControl">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ID" ReadOnly="True"/>
                <dxg:GridColumn FieldName="Name" ReadOnly="True"/>
                <dxg:GridColumn FieldName="Department" ReadOnly="True"/>
                <dxg:GridColumn FieldName="Position" ReadOnly="True"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" AllowDragDrop="True" 
                    DragRecordOver="OnDragRecordOver" DropRecord="OnDropRecord" />
            </dxg:GridControl.View>
        </dxg:GridControl>

        <Border Grid.Column="1" BorderBrush="LightGray" BorderThickness="1" Margin="30,0">
            <TextBlock Name="textBlock" AllowDrop="True" DragEnter="OnDragEnter" DragLeave="OnDragLeave"
                Drop="OnDrop" PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown" Padding="20">            
                <UniformGrid Columns="2">                    
                    <Label Content="Name:" />
                    <TextBox Text="{Binding Name}" />
                    <Label Content="Department:" />
                    <TextBox Text="{Binding Department}" />
                    <Label Content="Position:" />
                    <TextBox Text="{Binding Position}" />
                </UniformGrid>
            </TextBlock>
        </Border>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Collections.Generic;
using System.Windows.Input;
using System.Collections;
using System.Windows.Media;
using DevExpress.Xpf.Core;

namespace How_to_Drag_and_Drop_Between_GridControl_and_Other_Controls {
    public partial class MainWindow : Window {
        public class Employee {
            public int ID { get; set; }
            public string Name { get; set; }
            public string Position { get; set; }
            public string Department { get; set; }
            public override string ToString() {
                return Name;
            }
        }

        public static class Stuff {
            public static ObservableCollection<Employee> GetStuff() {
                ObservableCollection<Employee> stuff = new ObservableCollection<Employee>();
                stuff.Add(new Employee() { ID = 1, Name = "Gregory S. Price", Department = "", Position = "President" });
                stuff.Add(new Employee() { ID = 2, Name = "Irma R. Marshall", Department = "Marketing", Position = "Vice President" });
                stuff.Add(new Employee() { ID = 3, Name = "John C. Powell", Department = "Operations", Position = "Vice President" });
                stuff.Add(new Employee() { ID = 4, Name = "Christian P. Laclair", Department = "Production", Position = "Vice President" });
                stuff.Add(new Employee() { ID = 5, Name = "Karen J. Kelly", Department = "Finance", Position = "Vice President" });

                stuff.Add(new Employee() { ID = 6, Name = "Brian C. Cowling", Department = "Marketing", Position = "Manager" });
                stuff.Add(new Employee() { ID = 7, Name = "Thomas C. Dawson", Department = "Marketing", Position = "Manager" });
                stuff.Add(new Employee() { ID = 8, Name = "Angel M. Wilson", Department = "Marketing", Position = "Manager" });
                stuff.Add(new Employee() { ID = 9, Name = "Bryan R. Henderson", Department = "Marketing", Position = "Manager" });

                stuff.Add(new Employee() { ID = 10, Name = "Harold S. Brandes", Department = "Operations", Position = "Manager" });
                stuff.Add(new Employee() { ID = 11, Name = "Michael S. Blevins", Department = "Operations", Position = "Manager" });
                stuff.Add(new Employee() { ID = 12, Name = "Jan K. Sisk", Department = "Operations", Position = "Manager" });
                stuff.Add(new Employee() { ID = 13, Name = "Sidney L. Holder", Department = "Operations", Position = "Manager" });

                stuff.Add(new Employee() { ID = 14, Name = "James L. Kelsey", Department = "Production", Position = "Manager" });
                stuff.Add(new Employee() { ID = 15, Name = "Howard M. Carpenter", Department = "Production", Position = "Manager" });
                stuff.Add(new Employee() { ID = 16, Name = "Jennifer T. Tapia", Department = "Production", Position = "Manager" });

                stuff.Add(new Employee() { ID = 17, Name = "Judith P. Underhill", Department = "Finance", Position = "Manager" });
                stuff.Add(new Employee() { ID = 18, Name = "Russell E. Belton", Department = "Finance", Position = "Manager" });
                return stuff;
            }
        } 

        public MainWindow() {
            InitializeComponent();
            gridControl.ItemsSource = Stuff.GetStuff();
        }                      

        void OnDragEnter(object sender, DragEventArgs e) {
            if (e.Data.GetDataPresent(typeof(RecordDragDropData))) {
                TextBlock textBlock = (TextBlock)sender;                
                textBlock.Background = Brushes.SkyBlue;
                e.Handled = true;
            }
        }

        void OnDragLeave(object sender, DragEventArgs e) {
            TextBlock textBlock = (TextBlock)sender;
            textBlock.Background = null;
            textBlock.DataContext = null;
            e.Handled = true;
        }

        void OnDrop(object sender, DragEventArgs e) {
            if (e.Data.GetDataPresent(typeof(RecordDragDropData))) {
                TextBlock textBlock = (TextBlock)sender;
                object data = e.Data.GetData(typeof(RecordDragDropData));
                object[] employees = ((RecordDragDropData)data).Records;
                textBlock.DataContext = (Employee)((IList)employees)[0];
            }
        }

        void OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
            TextBlock textBlock = (TextBlock)sender;
            if (textBlock.DataContext != null) {
                DragDrop.DoDragDrop(textBlock, textBlock.DataContext, DragDropEffects.Move);
            }
        }

        void OnDragRecordOver(object sender, DragRecordOverEventArgs e) {
            if (e.IsFromOutside && e.Data.GetDataPresent(typeof(Employee))) {
                e.Effects = DragDropEffects.Move;
                e.Handled = true;
            }
        }

        void OnDropRecord(object sender, DropRecordEventArgs e) {
            if (e.IsFromOutside && e.Data.GetDataPresent(typeof(Employee))) {
                object data = e.Data.GetData(typeof(Employee));
                Employee employee = (Employee)data;
                e.Data.SetData(new RecordDragDropData(new List<Employee>() { employee }.ToArray()));
            }
        }
    }
}