Drag and Drop

2 Mar 20223 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 property 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">
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  allowRowDragAndDrop="true" allowSelection="true" allowPaging="true">
        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
        <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>
        <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
            <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

<div class="col-lg-6">
    <ejs-grid id="DestGrid"  allowRowDragAndDrop="true" allowSelection="true" allowPaging="true">
        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
        <e-grid-pagesettings pageCount="1" ></e-grid-pagesettings>
        <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
            <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}
  • 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 e-grid-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">
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  allowRowDragAndDrop="true" allowSelection="true">
        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
            <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    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, hierarchy grid and grouping features of grid.