Column Drag and Drop in Xamarin.Android SfDataGrid

15 Dec 20217 minutes to read

The SfDataGrid allows dragging and dropping a column header by setting the SfDataGrid.AllowDraggingColumn property to true. Drag view is displayed when dragging a column header. The drag and drop operations can be handled using the SfDataGrid QueryColumnDragging event.

The following code example illustrates how to enable column drag and drop in the SfDataGrid.

sfGrid.AllowDraggingColumn = true;

Column drag and drop

Events in column drag and drop

The QueryColumnDragging event is fired upon dragging a column and will be continuously fired till the dragging ends. By handing the SfDataGrid.QueryColumnDragging event, you can also cancel the dragging of a particular column header.

The QueryColumnDragging event provides following properties in QueryColumnDraggingEventArgs:

  • From: Returns the index of the dragging column.
  • To: Returns the dragging index where you try to drop the column.
  • Reason: Returns column dragging details as QueryColumnDraggingReason.
  • DraggingPosition: Returns the positions of the drag view during column drag and drop operations.
  • CanAutoScroll: Returns whether auto-scrolling should happen when column drag view reaches the left or right ends of the SfDataGrid.
  • Cancel: Returns the Boolean property to cancel the event.

Cancel dragging for a particular column

Dragging of a particular column can be canceled using QueryColumnDraggingReason argument of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.From returns the index of the dragged column.
    //e.Reason returns the dragging status of the column.
    if (e.From == 1 && e.Reason == QueryColumnDraggingReason.DragStarted)
        e.Cancel = true;
}

Cancel dropping when dragging over particular columns

Dropping when dragging over particular columns can be canceled using QueryColumnDraggingReason argument of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.To returns the index of the current column.
    //e.Reason returns the dragging status of the column.
    if ((e.To > 5 || e.To < 10) &&
    (e.Reason == QueryColumnDraggingReason.DragEnded || e.Reason == QueryColumnDraggingReason.Dragging))
        e.Cancel = true;
}

Cancel dropping of particular column

Dropping of a particular column can be canceled using QueryColumnDraggingReason argument of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.From returns the index of the dragged column.
    //e.Reason returns the dragging status of the column.
    if (e.From == 1 && e.Reason == QueryColumnDraggingReason.DragEnded)
        e.Cancel = true;
}

Cancel dropping at a particular position

Dropping at a particular position can be canceled using QueryColumnDraggingReason argument of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.To returns the index of the current column.
    //e.Reason returns the dragging status of the column.
    if ((e.To == 5 || e.To == 7) && e.Reason == QueryColumnDraggingReason.DragEnded)
        e.Cancel = true;
}

Cancel dropping of a particular column in a position

Dropping of a particular column in a position can be canceled using QueryColumnDraggingReason and Position arguments of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.To returns the index of the current column.
    //e.DraggingPosition returns the x and y position of the current column
     if (e.DraggingPosition == new Point(100,100) && e.Reason == QueryColumnDraggingReason.DragEnded)
                e.Cancel = true;
}

Cancel drag and drop between frozen and non-frozen columns

Cancel dragging between frozen and non-frozen columns

Dragging between frozen and non-frozen columns can be canceled using QueryColumnDraggingReason and From arguments of the QueryColumnDragging event handler by checking whether the value of From argument is a frozen column index.

SfGrid.FrozenColumnsCount = 2;

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.From returns the index of the dragged column.
    //e.To returns the index of the current column.
      if (e.From < 2 && e.Reason == QueryColumnDraggingReason.DragStarted)
        e.Cancel = true;
}

Cancel dropping between frozen and non-frozen columns

Dropping between frozen and non-frozen columns can be canceled using QueryColumnDraggingReason and From arguments of the QueryColumnDragging event handler by checking whether the e.From value is a frozen column index.

SfGrid.FrozenColumnsCount = 2;

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{
    //e.From returns the index of the dragged column.
    //e.To returns the index of the current column.
      if (e.From < 2 && e.Reason == QueryColumnDraggingReason.DragEnded)
        e.Cancel = true;
}

Customize column drag and drop indicators

The SfDataGrid allows customizing the column drag and drop indicators by writing a custom grid style, deriving from DataGridStyle and assigning it to the SfDataGrid.GridStyle property.

dataGrid.GridStyle = new CustomGridStyle();
// Custom style class
public class CustomGridStyle : DataGridStyle
{
    public CustomGridStyle()
    {     
    }
    public override int GetColumnDragDownIndicator()
    {
        return Resource.Drawable.GreenDown;
    }
    public override int GetColumnDragUpIndicator()
    {
        return Resource.Drawable.GreenUp;
    }
}

Customize column indicator

Cancel auto scrolling

Horizontal auto-scrolling of the SfDataGrid during column drag and drop can be canceled using CanAutoScroll argument of the QueryColumnDragging event handler.

this.SfGrid.QueryColumnDragging += SfGrid_QueryColumnDragging;

private void SfGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e)
{  
    // Disable scroll while dragging and dropping the columns.   
    e.CanAutoScroll = false;
}