Create Drag And Drop Operation Between DevExpress GridControl And Custom WPF UI | Saatody | Amit Padhiyar

 Today i will create Drag And Drop Operation. Actually, DevExpress GridControl support Drag and Drop in Views (TreeListView, TabelView, and CardView). But I am trying to drag GridControl row and drop on my custom UI.

Here I will write about Drag and Drop with two clipboard operations.

• Drag Copy And Drop
• Drag Cut And Drop

First set these two properties on GridControl And View (TreeListView, CardView, TableView).

GridControl.AllowDrop = true;
GridView.AllowDragDrop = true;
GridView.AllowDrop = true;
GridView.ShowDragDropHint = false;

Due to ShowDragDropHint false, The hint will be disable and only cursor will change during DnD (Drag and Drop).

First we create Drag Copy And Drop

it is too simple to create drag and drop with copy data or element. We just prevent drag leave events using e.Handled = true.

GridControl side coding

GridControl.AllowDrop = true;
GridView.AllowDragDrop = true;
GridView.AllowDrop = true;
GridView.ShowDragDropHint = false;

GridView.StartRecordDrag += (sender, e) =>
{

};
GridView.ContinueRecordDrag += (sender, e) =>
{

};
GridView.DragRecordOver += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
    e.Handled = true;
};
GridView.DropRecord += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
    e.Handled = true;
};
GridView.CompleteRecordDragDrop += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
    e.Handled = true;
};

CustomControl Side Coding

using DevExpress.Xpf.Core;

Cell.AllowDrop = true;

Cell.DragEnter += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
};
Cell.QueryContinueDrag += (sender, e) =>
{
    
};
Cell.DragOver += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
};
Cell.DragLeave += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
};
Cell.Drop += (sender, e) =>
{
    e.Effects = DragDropEffects.Copy;
    if (e.Data.GetDataPresent(typeof(RecordDragDropData)) == true)
    {
        e.Effects = DragDropEffects.Copy;
        var Item = (RecordDragDropData)e.Data.GetData(typeof(RecordDragDropData));
        var Node = (DD.Node)Item.Records[0];
        System.Console.WriteLine("Drop Name: " + Node.Name);
    }
};

Second we create Drag Cut And Drop

it is too simple to create drag and drop with cut / move data or element. We just don't prevent drag leave events using e.Handled = true. Means we don't need e.Handled = true property anymore.

GridControl side coding

GridControl.AllowDrop = true;
GridView.AllowDragDrop = true;
GridView.AllowDrop = true;
GridView.ShowDragDropHint = false;

GridView.StartRecordDrag += (sender, e) =>
{

};
GridView.ContinueRecordDrag += (sender, e) =>
{

};
GridView.DragRecordOver += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};
GridView.DropRecord += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};
GridView.CompleteRecordDragDrop += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};

CustomControl Side Coding

using DevExpress.Xpf.Core;

Cell.AllowDrop = true;

Cell.DragEnter += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};
Cell.QueryContinueDrag += (sender, e) =>
{
    
};
Cell.DragOver += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};
Cell.DragLeave += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
};
Cell.Drop += (sender, e) =>
{
    e.Effects = DragDropEffects.Move;
    if (e.Data.GetDataPresent(typeof(RecordDragDropData)) == true)
    {
        e.Effects = DragDropEffects.Move;
        var Item = (RecordDragDropData)e.Data.GetData(typeof(RecordDragDropData));
        var Node = (DD.Node)Item.Records[0];
        System.Console.WriteLine("Drop Name: " + Node.Name);
    }
};

This how we can drag and drop DevExpress GridControl data to our custom WPF components.