How to: Implement Card Dragging Between Details

• Nov 13, 2018
• 4 minutes to read

The following example assumes that we have a master-detail relationship within the grid control. The master View is represented by a GridView and the detail Views are represented by instances of the CardView class. This example shows how to implement card dragging between details.

The MouseDown event is used to identify the clicked card and initiate the drag operation. Then, the DragOver event is used to determine whether dropping is allowed. The GridControl.GetViewAt method is used to obtain the View currently located under the mouse pointer. If the View obtained is a detail View (a Card View), dropping is allowed.

Finally, the DragDrop event is used to determine the View where the card has been dropped (the GridControl.GetViewAt method is used again). Then, the dragged card is moved to that View by changing its field value that refers to the master record.

Note: to enable dropping you should set the grid control’s AllowDrop property value to true.

C#

using DevExpress.XtraGrid.Views.Base;
using DevExpress.XtraGrid.Views.Card;
using DevExpress.XtraGrid.Views.Grid;
using DevExpress.XtraGrid;
using DevExpress.XtraGrid.Views.Card.ViewInfo;
// ...
private void cvProducts_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e) {
   CardView view = sender as CardView;
   GridView parentView = view.ParentView as GridView;
   // Obtain the clicked point.
   CardHitInfo hi = view.CalcHitInfo(new Point(e.X, e.Y));
   // Determine if the clicked point belongs to a card caption.
   if (hi.HitTest == CardHitTest.CardCaption) {
      // Obtain the clicked card.
      string rowID = view.GetRowCellValue(hi.RowHandle, view.Columns["ProductID"]).ToString();
      gridControl1.DoDragDrop(rowID, DragDropEffects.Move);
   }
}
// ...
private void gridControl1_DragOver(object sender, System.Windows.Forms.DragEventArgs e) {
   GridControl grid = sender as GridControl;
   // Obtain the view over which the card is being dragged.
   Point pt = grid.PointToClient(new Point(e.X, e.Y));
   BaseView view = grid.GetViewAt(pt);
   if (view is CardView)
      e.Effect = DragDropEffects.Move;
   else
      e.Effect = DragDropEffects.None;
}
// ...
private void gridControl1_DragDrop(object sender, System.Windows.Forms.DragEventArgs e) {
   GridControl grid = sender as GridControl;
   // Obtain the view to which the card has been dropped.
   Point pt = grid.PointToClient(new Point(e.X, e.Y));
   CardView view = grid.GetViewAt(pt) as CardView;
   string dragData = e.Data.GetData(DataFormats.Text).ToString();
   int rowID = Convert.ToInt32(dragData);
   // Obtain the row owning the detail clone to which the card is dropped.
   GridView parentView = view.ParentView as GridView;
   object cellValue = parentView.GetRowCellValue(view.SourceRowHandle, 
     parentView.Columns["CategoryID"]);
   int currentParentID = Convert.ToInt32(cellValue);
   // Change the parent row of the card results in moving this card to the specified parent row.
   dataSet11.Products.Rows.Find(rowID)[dataSet11.Products.Columns["CategoryID"]] = 
     currentParentID;
}

VB.NET

Imports DevExpress.XtraGrid.Views.Base
Imports DevExpress.XtraGrid.Views.Card
Imports DevExpress.XtraGrid.Views.Grid
Imports DevExpress.XtraGrid
Imports DevExpress.XtraGrid.Views.Card.ViewInfo
// ...
Private Sub Form1_MouseDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown
   Dim View As CardView = sender
   Dim ParentView As GridView = View.ParentView
   ' Obtain the clicked point.
   Dim Hi As CardHitInfo = View.CalcHitInfo(New Point(e.X, e.Y))
   ' Determine if the clicked point belongs to a card caption.
   If Hi.HitTest = CardHitTest.CardCaption Then
      ' Obtain the clicked card.
      Dim RowID As String = View.GetRowCellValue(Hi.RowHandle, _
        View.Columns("ProductID")).ToString()
      GridControl1.DoDragDrop(RowID, DragDropEffects.Move)
   End If
End Sub
// ...
Private Sub Form1_DragOver(ByVal sender As Object, _
ByVal e As System.Windows.Forms.DragEventArgs) Handles MyBase.DragOver
   Dim Grid As GridControl = sender
   ' Obtain the view over which the card is being dragged.
   Dim pt As Point = Grid.PointToClient(New Point(e.X, e.Y));
   Dim View As BaseView = Grid.GetViewAt(pt)
   If TypeOf View Is CardView Then
      e.Effect = DragDropEffects.Move
   Else
      e.Effect = DragDropEffects.None
   End If
End Sub
// ...
Private Sub Form1_DragDrop(ByVal sender As Object, _
ByVal e As System.Windows.Forms.DragEventArgs) Handles MyBase.DragDrop
   Dim Grid As GridControl = sender
   ' Obtain the view to which the card has been dropped.
   Dim pt As Point = Grid.PointToClient(New Point(e.X, e.Y));
   Dim View As CardView = Grid.GetViewAt(pt)
   Dim dragData As String = e.Data.GetData(DataFormats.Text).ToString()
   Dim RowID As Integer = Convert.ToInt32(dragData)
   ' Obtain the row owning the detail clone to which the card is dropped.
   Dim parentView As GridView = View.ParentView
   Dim cellValue As Object = parentView.GetRowCellValue(view.SourceRowHandle, _
     parentView.Columns("CategoryID"))
   Dim currentParentID As Integer = Convert.ToInt32(cellValue)
   ' Change the parent row of the card results in moving this card to specified parent row.
   DataSet11.Products.Rows.Find(RowID)(DataSet11.Products.Columns("CategoryID")) = _
     currentParentID
End Sub