Drag and Drop support for column reordering in DataGrid control

rel="stylesheet" type=text/css href="http://www.codeproject.com/styles/global.css">

Link From :http://www.codeproject.com/cs/miscctrl/ElvinDataGridEx.asp

Introduction

DataGrid is one of the most powerful Windows?Forms control. By using default DataGrid property settings you can easily bind a DataSet to it to create an impressive Windows Forms user interface ?one that display large amounts of data efficiently and intuitively without bewildering the user.

Thanks to the extensible architecture of DataGrid control, it gives developers the flexibility in hand to extend its functionalities, where native support is not sufficed. In this article, I am going to show you how to enhance the DataGrid control with the drag and drop support for column reordering. This is particular useful in situation when you need to compare columns side-by-side that may not reside together by default.

Background

In this implementation, I've made use of some unmanaged Win32 APIs to perform the graphics drawing process ?one that draw the semi-transparent dragged column during the drag and drop operation. All these Win32 APIs are encapsulated in the WinGDI.cs file for the separation of managed and unmanaged code. Underpinnings the drawing of drag and drop support for column reordering is the function BitBlt.

BitBlt ?Bit Block Transfer, one of the powerful drawing functions which transfer a block of bits (a bitmap) from one device context to another. . One point worth mentioning in this API is that currently there are 17 constants defined for the dwRop (Raster Operation Code) variable and you can easily create different kind of effects on image by changing the raster operation code. SRCCOPY (0xcc0020) is the easiest to use and performs a simple copy action.

[DllImport("gdi32.dll")]
public static extern bool BitBlt
(
  IntPtr hdcDest,       // handle to destination DC (device context)
  int nXDest,           // x-coord of destination upper-left corner
  int nYDest,           // y-coord of destination upper-left corner
  int nWidth,          // width of destination rectangle
  int nHeight,          // height of destination rectangle
  IntPtr hdcSrc,       // handle to source DC
  int nXSrc,           // x-coordinate of source upper-left corner
  int nYSrc,            // y-coordinate of source upper-left corner
  System.Int32 dwRop    // raster operation code
);

For more information on this API, please consult the Win32 documentation.

Using the code

To preserve the existing functionalities provided by DataGrid control, I抳e created a new control named DataGridEx, which inherits from the existing DataGrid control. A property AllowUserToOrderColumns is added, which enables or disables the control抯 ability to reorder the columns. In order to provide drag and drop for column reordering, the methods OnMouseDown, OnMouseMove and OnMouseUp of the base control must be overridden.

OnMouseDown is the method that will be called when column header is clicked. To initiate the drag operation, it entails the AllowUserToOrderColumns property has been set to true and the mouse button that initiates the click event must be left mouse button. Just before starting the drag operation, ColumnStartDrag event will be fired to determine whether this column is drag-able. Developers at the application level can react to this event by setting the Cancel variable in the event arguments to true to stop the drag operation. It everything goes fine, the process of drag operation starts.

protected override void OnMouseDown(System.Windows.Forms.MouseEventArgs e)
{
  try
  {
    DataGrid.HitTestInfo hti = HitTest(e.X, e.Y);
          
    /* 
     * The following conditions must be met in order to 
     * start of the drag operation
     * 1) Column Header is clicked with left mouse button.
     * 2) AllowUserToOrderColumns property has been set to true
     * 
     * */
    if (
      (hti.Type == DataGrid.HitTestType.ColumnHeader)
      && ((e.Button & MouseButtons.Left) == MouseButtons.Left)
      && (allowColumnsReorder))
      {
        //  Notify application that the drag operation is about to start
        ColumnStartDragEventArgs csde = new ColumnStartDragEventArgs(
         hti.Column, GetColumnName(hti.Column), false);
        OnColumnStartDrag(csde);
          
        if (!csde.Cancel)  //  This column is drag-able
        {
          //  Remember the column header clicked
          dragColumnIndex   = hti.Column;
          isColumnDragging = true;
            
          /*
           * Currently, there is no way to determine the drag column's top 
           * left position. 
           * Workaround : Assumes the mouse clicked in the middle of the 
           * drag column.
           * 
           * */
          mouseDelta = new Point
            (
              e.X - (e.X - (GetColumnWidth(hti.Column) / 2)),
              (CaptionVisible == true ? GetCaptionHeight() : 0)
            );
                        
          Point dragColumn  = PointToScreen(new Point(e.X, mouseDelta.Y));
          Point screenPoint = PointToScreen(new Point(e.X, e.Y));
          screenPoint.X  -= mouseDelta.X;
          screenPoint.Y  = dragColumn.Y;
                        
          //  Retrieve the DataGridColumnStyle for the drag column
          dragColumnStyle = GetColumnStyle(hti.Column);
            
          //  Create the screen graphic device
          CreateDisplayDC();
            
          //  Determine the actual size of the dragged image
          dragImageSize = new Size(dragColumnStyle.Width, 
           ColumnHeaderHeight - 2);
            
          //  Determine and create the image buffer.
          buffer = new Bitmap(Math.Max(dragColumnStyle.Width, 
           NODROPIMAGE_WIDTH + 2), ColumnHeaderHeight);
          bufferGraphics = Graphics.FromImage(buffer);
          pBufferDC = bufferGraphics.GetHdc();
          
          //  Copy the rectangluar image from the screen into buffer.
          WinGDI.BitBlt(pBufferDC, 0, 0, buffer.Width, buffer.Height,
            pDisplayDC, screenPoint.X, screenPoint.Y, WinGDI.SRCCOPY);
            
          //  Store the image buffer position for tracking
          bufferPos = new Point(screenPoint.X, screenPoint.Y);
        }
      }
    }
    catch(Exception) { /* Ignore */ }
    finally
    {
      base.OnMouseDown(e);
    }
  }
}

OnMouseMove method will be called to draw the semi-transparent dragged column as the mouse moving around in the DataGrid. If the dragged column is drag over to another column, ColumnSequenceChanging event will be fired to determine whether the dragged column can be dropped onto it. Developers at the application level can use this event to determine the droppable columns based on their condition. An X icon will be drawn on the dragged column to inform users that the particular column is not droppable.

protected override void OnMouseMove(MouseEventArgs e)
{  
  try
  {  
    DataGrid.HitTestInfo hti = HitTest(e.X, e.Y);
        
    /* 
     * The following conditions must be met before 
     * performing the drawing of drag operation
     * 1) AllowUserToOrderColumns property has been set to true
     * 2) Column is being dragged with left mouse button
     * 
     * */
    if (
      (allowColumnsReorder)
      && (isColumnDragging)
      && ((e.Button & MouseButtons.Left) == MouseButtons.Left))
      {  
        if (hti.Column >= 0)
        {
          //  Re-calculate the mouse location in the screen
          Point screenPoint = PointToScreen(new Point(e.X, e.Y));
          screenPoint.X -= mouseDelta.X;
          screenPoint.Y  = bufferPos.Y;
          
          //  Performs the image swapping
          WinGDI.BitBlt(pDisplayDC, bufferPos.X, bufferPos.Y,
           buffer.Width, buffer.Height, pBufferDC, 0,
           0, WinGDI.SRCCOPY);
          WinGDI.BitBlt(pBufferDC, 0, 0, buffer.Width, buffer.Height,
           pDisplayDC, screenPoint.X, screenPoint.Y, 
           WinGDI.SRCCOPY);
          bufferPos = new Point(screenPoint.X, screenPoint.Y);
          /*
           * Notify application that the dragged column is dragging over 
           * to another column and determines whether the dragged column
           * can be dropped onto it.
           * 
           * */
          ColumnSequenceChangingEventArgs csce = 
           new ColumnSequenceChangingEventArgs(dragColumnIndex, 
            GetColumnName(dragColumnIndex), hti.Column, 
            GetColumnName(hti.Column), false); 
          OnColumnSequenceChanging(csce);
            
          if (csce.Cancel)  //  Drop on this column is not allow
            DrawDragImage(displayGraphics, screenPoint.X, screenPoint.Y, false);
          else
            DrawDragImage(displayGraphics, screenPoint.X, screenPoint.Y, true);
        }
      }
    }
    catch(Exception) { /* Ignore */ }
    finally
    {
      base.OnMouseMove(e);
    }
  }
}

When the mouse button releases, OnMouseUp method will be called to invoke the MoveColumn function to reorder the columns if the dragged and dropped column is not the same. ColumnSequenceChanged event will be fired once the column reordering is done. This marks the end of the drag operation and performs the necessary house keeping.

protected override void OnMouseUp(System.Windows.Forms.MouseEventArgs e)
{
  try
  {
    DataGrid.HitTestInfo hti = HitTest(e.X, e.Y);
    if(
      (allowColumnsReorder)
      && (isColumnDragging)
      && ((e.Button & MouseButtons.Left) == MouseButtons.Left))
    {  
      //  Clean up the drawn image from the screen
      WinGDI.BitBlt(pDisplayDC, bufferPos.X, bufferPos.Y, buffer.Width,
       buffer.Height, pBufferDC, 0, 0, WinGDI.SRCCOPY);
          
      /* 
       * The following conditions must be met before moving the drag column
       * 1) Drop column is within bound
       * 2) Source Column <> Destination Column
       * */
      if (hti.Column >= 0 && dragColumnIndex != hti.Column)
      {
        /*
         * Notify application that the dragged column is about to drop onto 
         * another column.
         * */
        ColumnSequenceChangingEventArgs columnChanging =
         new ColumnSequenceChangingEventArgs(dragColumnIndex,  
          GetColumnName(dragColumnIndex), hti.Column, 
          GetColumnName(hti.Column), false);
        OnColumnSequenceChanging(columnChanging);
                          
        if (!columnChanging.Cancel)  //  Drop on this column is allowed
        {
          //  Move the column
          MoveColumn(dragColumnIndex, hti.Column);
            
          //  Notify application that the dragged column
          // is reordered to new location
          ColumnSequenceChangedEventArgs columnChanged = 
           new ColumnSequenceChangedEventArgs(columnChanging.SourceColumnIndex, 
            columnChanging.SourceColumnName, columnChanging.DestinationColumnIndex, 
            columnChanging.DestinationColumnName);
          OnColumnSequenceChanged(columnChanged);
        }
      }
          
      //  House Keeping
      isColumnDragging = false;
      dragColumnIndex = -1;
      dragColumnStyle = null;
      DisposeDisplayDC();
      DisposeBufferDC();
    }
  }
  catch(Exception) { /* Ignore */ }
  finally
  {
    base.OnMouseUp(e);
  }
}

The cornerstone of drawing the dragged column is encapsulated in the function DrawDragImage. A normal semi-transparent dragged column will be drawn when it drags over to those droppable columns. Otherwise, a semi-transparent dragged column with an X icon will be drawn.

private void DrawDragImage(Graphics g, int x, int y, bool bEnabled)
{
  try
  {  
    g.SmoothingMode = SmoothingMode.AntiAlias;  
      // Anti-aliased rendering
        
    Rectangle rect = new Rectangle(x, y, dragImageSize.Width,
     dragImageSize.Height);
    using(Pen p = new Pen(Color.Black))
    {  
      //  Semi-Transparent
      using(Brush backBrush = new SolidBrush(Color.FromArgb(127, 
       Color.LightSteelBlue)))
      {
        using(Brush foreBrush = new SolidBrush(Color.Black))
        {
          g.FillRectangle(backBrush, rect.Left + 1, rect.Top + 1, 
           rect.Width - 2, rect.Height - 2);
          g.DrawRectangle(p, rect.Left, rect.Top, rect.Width - 1, 
           rect.Height - 1);
              
          using(StringFormat sf = new StringFormat(StringFormatFlags.NoWrap))
          {
            sf.LineAlignment = StringAlignment.Center;
            if (dragColumnStyle.Alignment == HorizontalAlignment.Center)
              sf.Alignment = StringAlignment.Center;
            else if (dragColumnStyle.Alignment == HorizontalAlignment.Left)
              sf.Alignment = StringAlignment.Near;
            else if (dragColumnStyle.Alignment == HorizontalAlignment.Right)
              sf.Alignment = StringAlignment.Far;
                              
            g.DrawString(dragColumnStyle.HeaderText, HeaderFont,
             foreBrush, rect, sf);
          }
              
          //  Draw an X icon in the semi-transparent drag column
          if (!bEnabled)
          {
            using(Pen redPen = new Pen(new SolidBrush(Color.Red), 3))
            {
              //  Note: Those offset applied here is meant to
              //  avoid drawing the X icon outside
              //  of the bound rectangle.
              Point p1; Point p2; // X
              Point p3; Point p4;  // Y
              if (dragImageSize.Width > NODROPIMAGE_WIDTH)
              {
                int left = rect.Left + ((dragImageSize.Width 
                 - NODROPIMAGE_WIDTH) / 2);
                p1 = new Point(left, rect.Top + 1);
                p2 = new Point(left + NODROPIMAGE_WIDTH, rect.Top 
                 + buffer.Height - 2);
                    
                p3 = new Point(left + NODROPIMAGE_WIDTH, rect.Top + 1);
                p4 = new Point(left, rect.Top + buffer.Height - 2);
              }
              else
              {
                p1 = new Point(rect.Left + 1, rect.Top + 1);
                p2 = new Point(rect.Left + NODROPIMAGE_WIDTH - 1,
                 rect.Top + buffer.Height - 2);
                    
                p3 = new Point(rect.Left + NODROPIMAGE_WIDTH - 1,
                 rect.Top + 1);
                p4 = new Point(rect.Left + 1, rect.Top + buffer.Height - 2);
              }
              redPen.StartCap = LineCap.Round;
              redPen.EndCap   = LineCap.Round;
                  
              g.DrawLine(redPen, p1, p2);
              g.DrawLine(redPen, p3, p4);
            }
          }
        }  
      }
    }
  }
  catch(Exception) { /* Ignore */ }
}

MoveColumn performs the intelligent column reordering where dragged column will be positioned before the dropped column if the dragged column was previously positioned after the dropped column and vice versa.

public void MoveColumn(int fromColumn, int toColumn) 
{ 
  if(fromColumn == toColumn) return;
    
  DataGridTableStyle oldTS = TableStyles[0];
  DataGridTableStyle newTS = new DataGridTableStyle();
  newTS.MappingName = oldTS.MappingName;  // Table Name
  CopyTableStyle(oldTS, newTS);  
    // Copy the old TableStyle to new TableStyle
      
  for(int i = 0; i < oldTS.GridColumnStyles.Count; i++) 
  {
    if(i != fromColumn && fromColumn < toColumn)
      newTS.GridColumnStyles.Add(oldTS.GridColumnStyles[i]); 
      
    if(i == toColumn) 
      newTS.GridColumnStyles.Add(oldTS.GridColumnStyles[fromColumn]); 
      
    if(i != fromColumn && fromColumn > toColumn) 
      newTS.GridColumnStyles.Add(oldTS.GridColumnStyles[i]);      
  } 
  TableStyles.Remove(oldTS); 
  TableStyles.Add(newTS); 
}

Points of Interest

For those developers who are interested to convert the drawing functions from unmanaged code to managed code, feel free to try the DrawImage managed API. However, the performance of DrawImage function is slower than the Win32 counterpart, as it creates and destroys new device context for each call.

Conclusion

Column Reordering is just one enhancement to the DataGrid control. If the native functionalities provided in the Windows Forms controls aren't exactly what you need for all your scenarios, you can take advantage of the extensibility features of Windows Forms architecture to override and extend these controls to make them fit your particular needs.