Row drag and drop in EJ2 TypeScript Grid control

8 Mar 202424 minutes to read

The Syncfusion EJ2 TypeScript Grid control provides built-in support for row drag and drop functionality. This feature allows you to easily rearrange rows within the grid by dragging and dropping them to new positions. Additionally, you can also drag and drop rows from one grid to another grid, as well as drag and drop rows to custom controls.

To use the row drag and drop feature in Grid control, you need to inject the RowDD module in the grid. The RowDD is responsible for handling the row drag and drop functionality in the grid control. Once you have injected the RowDD, you can then use the allowRowDragAndDrop and targetID properties to enable and configure the row drag and drop feature in the Grid.

Drag and drop within grid

The drag and drop feature allows you to rearrange rows within the grid by dragging them using a drag icon. This feature can be enabled by setting the allowRowDragAndDrop property to true. This property is a boolean value that determines whether row drag and drop is enabled or not. By default, it is set to false, which means that row drag and drop is disabled.

Here’s an example of how to enable drag and drop within the Grid:

import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(RowDD, Selection);

let grid: Grid = new Grid({
    dataSource: data,
    allowRowDragAndDrop: true,
    selectionSettings: { type: 'Multiple' },
    height: 400,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right'},
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'OrderDate', headerText: 'Order Date', width: 100, format:'yMd', textAlign: 'Right' },
        { field: 'Freight', headerText: 'Freight', width: 120, format:'C2', textAlign: 'Right' },
        { field: 'ShipCity', headerText: 'Ship City', width: 130 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 }
    ]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display: inline-block">
            <div id="Grid"></div> 
        </div>  
    </div>
</body>
</html>

Drag and drop to grid

The grid row drag and drop allows you to drag grid rows and drop to another grid. This feature can be enabled by setting the allowRowDragAndDrop property to true in the Grid control. This property specifies whether to enable or disable the row drag and drop feature in the Grid. By default, this property is set to false, which means that row drag and drop functionality is not enabled.

To specify the target control where the grid rows should be dropped, use the targetID property of the rowDropSettings object. The targetID property takes the ID of the target control as its value.

Here’s an example code snippet that demonstrates how to enable Row drag and drop another Grid control:

import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject( RowDD, Selection);

let grid: Grid = new Grid({
    dataSource: data,
    allowRowDragAndDrop: true,
    rowDropSettings: { targetID: 'DestGrid' },
    selectionSettings: { type: 'Multiple' },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 }
    ]
});
grid.appendTo('#Grid');

let destGrid: Grid = new Grid({
    dataSource: [],
    allowRowDragAndDrop: true,
    rowDropSettings: { targetID: 'Grid' },
    selectionSettings: { type: 'Multiple' },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 }
    ]
});
destGrid.appendTo('#DestGrid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display: inline-block">
            <div id="Grid"></div>
            <div id="DestGrid"></div>
        </div>  
    </div>
</body>
</html>

  • The row drag and drop feature is not supported in virtual scrolling and frozen rows and columns mode.
  • In order to use row drag and drop, you need to inject the RowDD module in the grid.

Drag and drop to custom control

The Grid provides the feature to drag and drop grid rows to any custom control. This feature allows you to easily move rows from one control to another without having to manually copy and paste data. To enable row drag and drop, you need to set the allowRowDragAndDrop property to true and defining the custom control ID in the targetID property of the rowDropSettings object. The ID provided in targetID should correspond to the ID of the target control where the rows are to be dropped.

In the below example, the selected grid row is dragged and dropped in to the TreeGrid control by using rowDrop event. Once the row is dropped into the TreeGrid control, we have removed the corresponding grid row from grid and its data inserted in custom control.

import { Grid, Page, RowDD, Selection, Edit, RowDragEventArgs } from '@syncfusion/ej2-grids';
import { TreeGrid, Edit as TreeEdit } from '@syncfusion/ej2-treegrid';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { sampleGridData } from './datasource.ts';

Grid.Inject(Page, RowDD, Selection, Edit);
TreeGrid.Inject(TreeEdit);

let grid: Grid = new Grid({
  dataSource: sampleGridData,
  allowPaging: true,
  allowSelection: true,
  allowRowDragAndDrop: true,
  rowDropSettings: { targetID: 'TreeGrid' },
  selectionSettings: { type: 'Multiple' },
  editSettings: { allowDeleting: true },
  columns: [
    { field: 'taskID', headerText: 'taskID', textAlign: 'Right', width: 90 },
    { field: 'taskName', headerText: 'taskName', textAlign: 'Left', width: 180 },
    { field: 'description', headerText: 'description', textAlign: 'Left', width: 180 },
    { field: 'category', headerText: 'category', textAlign: 'Left', width: 180 },
    { field: 'startDate', headerText: 'startDate', textAlign: 'Right', format: 'yMd', width: 120 },
    { field: 'duration', headerText: 'duration', textAlign: 'Right', width: 80 }
  ],
  rowDrop: function (args: RowDragEventArgs) {
    let grid = (document.getElementById('Grid') as Grid).ej2_instances[0];
    let tree = (document.getElementById('TreeGrid') as TreeGrid).ej2_instances[0];
    if (args.target.closest('.e-treegrid')) {
      args.cancel = true;
      let rowIndex = !isNullOrUndefined(args.target.closest('.e-row'))
        ? args.target.closest('.e-row').rowIndex
        : 0;
      for (let i = 0; i < args.data.length; i++) {
        tree.addRecord(args.data[i], rowIndex);
        grid.deleteRecord('taskID', args.data[i]);
      }
    }
  },
});
grid.appendTo('#Grid');

let treeGridObj: TreeGrid = new TreeGrid({
  childMapping: 'subtasks',
  editSettings: { allowAdding: true, allowEditing: true },
  columns: [
    { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
    { field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
    { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
    { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
  ],
});
treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" /> 
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="http://cdn.syncfusion.com/ej2/ej2-treegrid/styles/bootstrap5.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display: inline-block">
            <div id="Grid"></div> 
            <div id="TreeGrid"></div> 
        </div>  
    </div>
</body>
</html>

  • The rowDrop event is fired when a row is dropped onto a custom control, regardless of whether the drop is successful or not. You can use the args.cancel property to prevent the default action.

Drag and drop rows without drag icon

By default, when performing a drag and drop operation in the Syncfusion Grid, drag icons are displayed. However, in some cases, you may want to hide these drag icons. This can be achieved by setting the targetID property of the rowDropSettings object to the current Grid’s ID.

By setting the targetID, the Grid will render without a helper icon for row dragging. You can then customize the drag and drop action by binding to the rowDrop event of the Grid. In the rowDrop event, you can prevent the default action by setting args.cancel to true, and reorder the rows using the reorderRows method of the Grid.

Here’s an example of how to hide the drag and drop icon in the Syncfusion Grid:

import { Grid, RowDD, Selection, RowDragEventArgs } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(RowDD, Selection);

let grid: Grid = new Grid({
    dataSource: data,
    allowRowDragAndDrop: true,
    rowDropSettings: { targetID: 'Grid' },
    selectionSettings: { type: 'Multiple' },
    columns: [
        { field: 'OrderID',headerText: 'Order ID', width: 120,textAlign: 'Right' },
        { field: 'CustomerID',headerText: 'Customer Name',width: 130 },
        { field: 'OrderDate',headerText: 'Order Date',width: 120,format: 'yMd',textAlign: 'Right' },
        { field: 'Freight',headerText: 'Freight',width: 120,format: 'C2',textAlign: 'Right' },
        { field: 'ShipCity',headerText: 'Ship City',width: 130 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
    ],
    rowDrop: function(args:RowDragEventArgs){
        args.cancel = true;
        let value = [];
        for (let index = 0; index < args.rows.length; index++) {
            value.push(args.fromIndex + index);
        }
        grid.reorderRows(value, args.dropIndex);
    }
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display: inline-block">
            <div id="Grid"></div> 
        </div>  
    </div>
</body>
</html>

  • The selection feature must be enabled in the Grid to allow users to select rows before performing the drag and drop operation.
  • Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the type property must be set to Multiple.

Drag and drop events

The Grid control provides a set of events that are triggered during drag and drop operations on grid rows. These events allow you to customize the drag element, track the progress of the dragging operation, and perform actions when a row is dropped on a target element. The following events are available:

  1. rowDragStartHelper: This event is triggered when a click occurs on the drag icon or a grid row. It allows you to customize the drag element based on specific criteria.

  2. rowDragStart: This event is triggered when the dragging of a grid row starts.

  3. rowDrag: This event is triggered continuously while the grid row is being dragged.

  4. rowDrop: This event is triggered when a drag element is dropped onto a target element.

import { Grid, RowDD, Selection, Page, RowDragEventArgs } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(RowDD, Selection, Page );

let grid: Grid = new Grid({
    dataSource: data,
    allowRowDragAndDrop: true,
    allowPaging: true,
    selectionSettings: { type: 'Multiple' },
    columns: [
      { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
      { field: 'CustomerID', headerText: 'Customer ID', width: 130 },
      { field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd', textAlign: 'Right' },
      { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }
    ],
    rowDragStart: function (args: RowDragEventArgs) {
      (document.getElementById('message') as HTMLElement).innerText = `rowDragStart event triggered`;
      args.cancel = true;
    },
    rowDragStartHelper: function (args: RowDragEventArgs) {
      (document.getElementById('message') as HTMLElement).innerText = `rowDragStartHelper event triggered`;
      if (args.data[0].OrderID === 10248) {
        args.cancel = true;
      }
    },
    rowDrag: function (args: RowDragEventArgs) {
      (document.getElementById('message') as HTMLElement).innerText = `rowDrag event triggered`;
      args.rows.forEach((row) => {
        row.classList.add('drag-limit');
      });
    },
    rowDrop: function (args: RowDragEventArgs) {
      (document.getElementById('message') as HTMLElement).innerText = `rowDrop event triggered`;
      let value = [];
      for (let index = 0; index < args.rows.length; index++) {
        value.push(args.fromIndex + index);
      }
      grid.reorderRows(value, args.dropIndex);
    },
  });
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .event-message {
            text-align: center;
            color: red;
            font-size: 16px;
        }

        .drag-limit .e-rowcell {
            border: 1px solid red;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display: inline-block">
            <p class="event-message" id="message"></p>
            <div id="Grid"></div> 
        </div>  
    </div>
</body>
</html>

Limitations

  • 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 row template, detail template and hierarchy grid features of grid.

See also

Sorting data in the Syncfusion Grid
Filtering data in the Syncfusion Grid