Drag and Drop in ASP.NET MVC Grid Component

7 Mar 20244 minutes to read

The grid row drag and drop allows you to drag and drop grid rows to another grid or custom component. To enable row drag and drop, set the AllowRowDragAndDrop to true. The target component where the grid rows are to be dropped can be set by using the TargetID.

<div class="col-lg-6">
    @Html.EJS().Grid("RowDragDrop").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection().AllowRowDragAndDrop(true).Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
        col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    }).AllowPaging().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(1).PageSize(10)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "DestGrid" }).Render()
</div>

<div class="col-lg-6">
    @Html.EJS().Grid("DestGrid").AllowSelection().AllowRowDragAndDrop(true).Columns(col =>
    {
      col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
      col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
      col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    }).AllowPaging().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(1).PageSize(5)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "RowDragDrop" }).Render()
</div>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

NOTE

Selection feature must be enabled for row drag and drop.

Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the Type property of SelectionSettings must be set to Multiple.

Drag and drop within Grid

The grid row drag and drop allows you to drag and drop grid rows on the same grid using drag icon. To enable row drag and drop, set the AllowRowDragAndDrop to true.

<div class="col-lg-6">
    @Html.EJS().Grid("RowDragDrop").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowRowDragAndDrop(true).Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
        col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
        col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();

    }).AllowPaging().AllowSelection().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
</div>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Drag and drop rows without drag icon

You can hide the drag and drop icon when performing a drag and drop operation within the grid. This can be achieved by setting the TargetID of the RowDropSettings as the current Grid’s ID.

By setting the TargetID, the Grid will render without a helper icon (for row drag). Now you can customize the drag and drop action. To control the drop action, you can bind the RowDrop event of the Grid. In the RowDrop event, you can prevent the default action(args.cancel as true) and reorder the rows using reorderRows method of the Grid.

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSelection(true).AllowRowDragAndDrop(true).Columns(col=> {

    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("120");
    col.Field("CustomerID").HeaderText("Customer Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150");
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("120").Format("C2");
    col.Field("ShipCity").HeaderText("ShipCity").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("120");

}).RowDrop("rowDrop").SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "Grid" }).Render()
     
<script>
    function rowDrop(args){
       args.cancel = true;
       var value = [];
       for (var r = 0; r < args.rows.length; r++) {
          value.push(args.fromIndex + r);
       }
       this.reorderRows(value, args.dropIndex);
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords().ToList();
    return View();
}

Limitations of row drag and drop

  • Multiple rows can be drag and drop in the row selections basis.
  • Single row is able to drag and drop in same grid without enable the row selection.
  • Row drag and drop feature is not having built in support with sorting, filtering and hierarchy grid features of grid.