How to: Enable Drag-and-Drop in the CardView

• Jun 07, 2019
• 5 minutes to read

This example demonstrates how to enable Drag-and-Drop functionality in the GridControl with a Card View. The DataViewBase.AllowDragDrop property is set to true.

Note

The GridControl ships with native drag-and-drop support starting from version 17.2. Use Drag-and-Drop Managers to enable drag-and-drop functionality in the previous versions.

The image below shows the result:

View Example

MainWindow.xaml.cs

using System.Windows;

namespace CardViewDragDrop {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
}

OrderHelper.cs

using DevExpress.Mvvm;
using System;
using System.Collections.ObjectModel;

namespace DXSample {
    public class OrderHelper {
        public ObservableCollection<Order> Orders { get; private set; }

        public OrderHelper() {
            Random rnd = new Random();

            Orders = new ObservableCollection<Order>();
            for (int i = 0; i < rnd.Next(100, 200); i++)
                Orders.Add(new Order());
        }
    }

    public class Order : ViewModelBase {
        static Random rnd = new Random();

        string _Name;
        DateTime _OrderDate;
        int _Amount;
        int _Price;
        bool _IsProcessed;

        #region Properties

        public string Name {
            get { return _Name; }
            set { SetProperty(ref _Name, value, () => Name); }
        }
        public DateTime OrderDate {
            get { return _OrderDate; }
            set { SetProperty(ref _OrderDate, value, () => OrderDate); }
        }
        public int Amount {
            get { return _Amount; }
            set { SetProperty(ref _Amount, value, () => Amount); }
        }
        public int Price {
            get { return _Price; }
            set { SetProperty(ref _Price, value, () => Price); }
        }
        public bool IsProcessed {
            get { return _IsProcessed; }
            set { SetProperty(ref _IsProcessed, value, () => IsProcessed); }
        }

        #endregion

        public Order() {
            Name = RandomStringHelper.GetRandomString();
            OrderDate = new DateTime(rnd.Next(1998, 2012), rnd.Next(1, 12), rnd.Next(1, 28));
            Amount = rnd.Next(-1000, 1000);
            Price = rnd.Next(0, 10000);
            IsProcessed = rnd.NextDouble() > 0.5;
        }

    }

    public class RandomStringHelper {
        static Random rnd = new Random();
        static string letters = "abcdefghijklmnopqrstuvwxyz";

        public static string GetRandomString() {
            int length = rnd.Next(6, 20);
            string retVal = ("" + letters[rnd.Next(25)]).ToUpper();

            for (int i = 0; i < length - 1; i++)
                retVal += letters[rnd.Next(25)];

            return retVal;
        }
    }
}

MainWindow.xaml

<Window x:Class="CardViewDragDrop.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:DXSample="clr-namespace:DXSample"
        Title="MainWindow" Height="640" Width="950">
    <Window.DataContext>
        <DXSample:OrderHelper/>
    </Window.DataContext>
    <Grid>
        <dxg:GridControl ItemsSource="{Binding Orders}" AutoPopulateColumns="True" >
            <dxg:GridControl.View>
                <dxg:CardView AllowDragDrop="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

OrderHelper.vb

Imports DevExpress.Mvvm
Imports System
Imports System.Collections.ObjectModel

Namespace DXSample
    Public Class OrderHelper
        Private privateOrders As ObservableCollection(Of Order)
        Public Property Orders() As ObservableCollection(Of Order)
            Get
                Return privateOrders
            End Get
            Private Set(ByVal value As ObservableCollection(Of Order))
                privateOrders = value
            End Set
        End Property

        Public Sub New()
            Dim rnd As New Random()

            Orders = New ObservableCollection(Of Order)()
            Dim i As Integer = 0
            Do While i < rnd.Next(100, 200)
                Orders.Add(New Order())
                i += 1
            Loop
        End Sub
    End Class

    Public Class Order
        Inherits ViewModelBase

        Private Shared rnd As New Random()

        Private _Name As String
        Private _OrderDate As Date
        Private _Amount As Integer
        Private _Price As Integer
        Private _IsProcessed As Boolean

        #Region "Properties"

        Public Property Name() As String
            Get
                Return _Name
            End Get
            Set(ByVal value As String)
                SetProperty(_Name, value, Function() Name)
            End Set
        End Property
        Public Property OrderDate() As Date
            Get
                Return _OrderDate
            End Get
            Set(ByVal value As Date)
                SetProperty(_OrderDate, value, Function() OrderDate)
            End Set
        End Property
        Public Property Amount() As Integer
            Get
                Return _Amount
            End Get
            Set(ByVal value As Integer)
                SetProperty(_Amount, value, Function() Amount)
            End Set
        End Property
        Public Property Price() As Integer
            Get
                Return _Price
            End Get
            Set(ByVal value As Integer)
                SetProperty(_Price, value, Function() Price)
            End Set
        End Property
        Public Property IsProcessed() As Boolean
            Get
                Return _IsProcessed
            End Get
            Set(ByVal value As Boolean)
                SetProperty(_IsProcessed, value, Function() IsProcessed)
            End Set
        End Property

        #End Region

        Public Sub New()
            Name = RandomStringHelper.GetRandomString()
            OrderDate = New Date(rnd.Next(1998, 2012), rnd.Next(1, 12), rnd.Next(1, 28))
            Amount = rnd.Next(-1000, 1000)
            Price = rnd.Next(0, 10000)
            IsProcessed = rnd.NextDouble() > 0.5
        End Sub

    End Class

    Public Class RandomStringHelper
        Private Shared rnd As New Random()
        Private Shared letters As String = "abcdefghijklmnopqrstuvwxyz"

        Public Shared Function GetRandomString() As String
            Dim length As Integer = rnd.Next(6, 20)
            Dim retVal As String = ("" & letters.Chars(rnd.Next(25))).ToUpper()

            Dim i As Integer = 0
            Do While i < length - 1
                retVal &= letters.Chars(rnd.Next(25))
                i += 1
            Loop

            Return retVal
        End Function
    End Class
End Namespace

MainWindow.xaml.vb

Imports System.Windows

Namespace CardViewDragDrop
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Application.xaml.vb

' Developer Express Code Central Example:
' How to implement the Drag&Drop functionality for the CardView
' 
' We have created an example demonstrating how to implement the Drag&Drop
' functionality for the CardView.
' This functionality is encapsulated in the
' CardDragDropManager class. So, all you need to do is to attach this behavior to
' the GridControl.
' 
' You can find sample updates and versions for different programming languages here:
' https://supportcenter.devexpress.com/ticket/details/e4616/how-to-enable-drag-and-drop-feature-in-the-cardview

' Developer Express Code Central Example:
' How to implement the Drag&Drop functionality for the CardView
' 
' We have created an example demonstrating how to implement the Drag&Drop
' functionality for the CardView.
' This functionality is encapsulated in the
' CardDragDropManager class. So, all you need to do is to attach this behavior to
' the GridControl.
' 
' You can find sample updates and versions for different programming languages here:
' https://supportcenter.devexpress.com/ticket/details/e4616/how-to-enable-drag-and-drop-feature-in-the-cardview

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

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

    End Class
End Namespace

Application.xaml

<Application x:Class="CardViewDragDrop.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>