How to place line indicator instead of arrows while Drag and Drop in SfDataGrid?

2 mins read

SfDataGrid allows you to customize the drag and drop indicators by writing a custom style for SfDataGrid. Assign the new style to the SfDataGrid.GridStyle property.

To show a line indicator instead of the default arrow indicators, you need to remove the default indicator by overriding the style as the default indicators are arranged with a specific width. Now you can show your custom view as indicators using the SfDataGrid.RowColumnIndexToPoint method in the SfDataGrid.QueryRowDragging event.

When dragging is started, you need to add the custom view using AddSubview method and remove the it when the dragging is ended using RemoveFromSuperview method.

The below code illustrates how to place the custom view instead of Drag and Drop icon.

public class MyViewController : UIViewController
{
    UIView view;
    SfDataGrid dataGrid;
    ViewModel viewModel;
    private bool isIndicatorDisplay = false;
    public MyViewController()
    {
        viewModel = new ViewModel();
        dataGrid = new SfDataGrid();
        dataGrid.ItemsSource = viewModel.OrdersInfo;
        dataGrid.AllowDraggingRow = true;
        dataGrid.GridStyle = new CustomGridStyle();
        createIndicator();
        View.AddSubview(dataGrid);
        View.AddSubview(view);
        dataGrid.QueryRowDragging += DataGrid_QueryRowDragging;
    }
 
    private async void DataGrid_QueryRowDragging(object sender, QueryRowDraggingEventArgs e)
    {
        if ((e.Reason == QueryRowDraggingReason.DragStarted && !isIndicatorDisplay) || ((e.Reason == QueryRowDraggingReason.Dragging) && isIndicatorDisplay))
        {
            view.BackgroundColor = UIColor.Black;
            if (!View.Subviews.Contains(view))
                View.AddSubviews(view);
            var point = dataGrid.RowColumnIndexToPoint(new RowColumnIndex(e.To, 0));
            view.Frame = new CoreGraphics.CGRect(0, point.Y, this.dataGrid.Frame.Width, 2);
            isIndicatorDisplay = true;
        }
        else if (e.Reason == QueryRowDraggingReason.DragEnded)
        {
            view.BackgroundColor = UIColor.Green;
            await Task.Delay(300);
            view.RemoveFromSuperview();
            isIndicatorDisplay = false;
        }
        else
        {
            view.BackgroundColor = UIColor.Green;
            await Task.Delay(2000);
            view.RemoveFromSuperview();
            isIndicatorDisplay = false;
        }
    }
 
    public override void ViewDidLayoutSubviews()
    {
        base.ViewDidLayoutSubviews();
        dataGrid.Frame = new CoreGraphics.CGRect(0, 0, this.View.Frame.Width, this.View.Frame.Height);
 
    }
    private void createIndicator()
    {
        view = new UIView();
        view.BackgroundColor = UIColor.Black;
    }
}

The below code example illustrates how to customize the drag and drop icon.

public class CustomGridStyle : DataGridStyle
{
    public CustomGridStyle()
    {
    }
 
    public override UIImage GetRowDragDownIndicator()
    {
        return null;
    }
 
    public override UIImage GetRowDragUpIndicator()
    {
        return null;
    }
}