JavaScript Data GridRow Dragging Between Grids

Version 36.2.0

Row Drag Between Grids is concerned with seamless integration among different grids, allowing records to be dragged from one grid and dropped at a specific index on another grid.

Function

Adds a drop zone outside of the grid where rows can be dropped.

RowDragModule

Function

Removes an external drop zone added by addRowDropZone.

RowDragModule

Function

Returns the RowDropZoneParams to be used by another grid's addRowDropZone method.

RowDragModule

Adding a Grid as Target Copy Link

To allow adding a grid as DropZone, the getRowDropZoneParams API method should be used in the target grid and the addRowDropZone in the source grid.

const dropZoneParams = targetGridApi.getRowDropZoneParams({
    onDragStop: function() {
        alert('Record Dropped!');
    }
});

if (dropZoneParams) {
    sourceGridApi.addRowDropZone(dropZoneParams);

    // when the DropZone above is no longer needed
    sourceGridApi.removeRowDropZone(dropZoneParams);
}

In the example below, note the following:

When you drag from one grid to another, a line will appear indicating where the row will be placed.
Rows can be dragged from one grid to the other grid. When the row is received, it is not removed from the first grid. This is the choice of the example. The example could equally have removed from the other grid.
Rows can be removed from both grids by dragging the row to the 'Trash' drop zone.
New rows can be created by clicking on the red, green and blue buttons.

main.ts

import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  RowDragModule,
  RowDropZoneParams,
  RowStyleModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

// Register the required feature modules with the Grid
if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  RowApiModule,
  TextFilterModule,
  RowDragModule,
  RowStyleModule,
  ClientSideRowModelModule,
]);

let rowIdSequence = 100;

const leftColumnDefs: ColDef[] = [
  { field: "id", rowDrag: true },
  { field: "color" },
  { field: "value1" },
  { field: "value2" },
];

const rightColumnDefs: ColDef[] = [
  { field: "id", rowDrag: true },
  { field: "color" },
  { field: "value1" },
  { field: "value2" },
];
let leftApi: GridApi;
const leftGridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  rowClassRules: {
    "red-row": 'data.color == "Red"',
    "green-row": 'data.color == "Green"',
    "blue-row": 'data.color == "Blue"',
  },
  getRowId: (params: GetRowIdParams) => {
    return String(params.data.id);
  },
  rowData: createRowBlock(2),
  rowDragManaged: true,
  suppressMoveWhenRowDragging: true,
  columnDefs: leftColumnDefs,
  onGridReady: (params) => {
    addBinZone(params);
    addGridDropZone(params, "Right");
  },
};
let rightApi: GridApi;
const rightGridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  rowClassRules: {
    "red-row": 'data.color == "Red"',
    "green-row": 'data.color == "Green"',
    "blue-row": 'data.color == "Blue"',
  },
  getRowId: (params: GetRowIdParams) => {
    return String(params.data.id);
  },
  rowData: createRowBlock(2),
  rowDragManaged: true,
  suppressMoveWhenRowDragging: true,
  columnDefs: rightColumnDefs,
  onGridReady: (params) => {
    addBinZone(params);
    addGridDropZone(params, "Left");
  },
};

function createRowBlock(blocks: number) {
  blocks = blocks || 1;

  let output: any[] = [];

  for (let i = 0; i < blocks; i++) {
    output = output.concat(
      ["Red", "Green", "Blue"].map(function (color) {
        return createDataItem(color);
      }),
    );
  }

  return output;
}

function createDataItem(color: string) {
  return {
    id: rowIdSequence++,
    color: color,
    value1: Math.floor(window.agRandom() * 100),
    value2: Math.floor(window.agRandom() * 100),
  };
}

function addRecordToGrid(side: string, data: any) {
  // if data missing or data has no it, do nothing
  if (!data || data.id == null) {
    return;
  }

  let api = side === "left" ? leftApi : rightApi,
    // do nothing if row is already in the grid, otherwise we would have duplicates
    rowAlreadyInGrid = !!api!.getRowNode(data.id),
    transaction;

  if (rowAlreadyInGrid) {
    console.log("not adding row to avoid duplicates in the grid");
    return;
  }

  transaction = {
    add: [data],
  };

  api!.applyTransaction(transaction);
}

function onFactoryButtonClick(e: any) {
  const button = e.currentTarget,
    buttonColor = button.getAttribute("data-color"),
    side = button.getAttribute("data-side"),
    data = createDataItem(buttonColor);

  addRecordToGrid(side, data);
}

function binDrop(data: any) {
  // if data missing or data has no id, do nothing
  if (!data || data.id == null) {
    return;
  }

  const transaction = {
    remove: [data],
  };

  [leftApi, rightApi].forEach((api) => {
    const rowsInGrid = !!api!.getRowNode(data.id);

    if (rowsInGrid) {
      api!.applyTransaction(transaction);
    }
  });
}

function addBinZone(params: GridReadyEvent) {
  const eBin = document.querySelector(".bin") as any,
    icon = eBin.querySelector("i"),
    dropZone: RowDropZoneParams = {
      getContainer: () => {
        return eBin;
      },
      onDragEnter: () => {
        eBin.style.color = "blue";
        icon.style.transform = "scale(1.5)";
      },
      onDragLeave: () => {
        eBin.style = "";
        icon.style.transform = "scale(1)";
      },
      onDragStop: (params) => {
        binDrop(params.node.data);
        eBin.style = "";
        icon.style.transform = "scale(1)";
      },
    };

  params.api.addRowDropZone(dropZone);
}

function addGridDropZone(params: GridReadyEvent, side: string) {
  const api = (side === "Left" ? leftApi : rightApi)!;
  const dropZone = api.getRowDropZoneParams();

  params.api.addRowDropZone(dropZone);
}

function loadGrid(side: string) {
  const grid = document.querySelector<HTMLElement>("#e" + side + "Grid")!;
  if (side === "Left") {
    leftApi = createGrid(grid, leftGridOptions);
  } else {
    rightApi = createGrid(grid, rightGridOptions);
  }
}

const buttons = document.querySelectorAll("button.factory");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", onFactoryButtonClick);
}

loadGrid("Left");
loadGrid("Right");

style.css

.example-wrapper {
    display: flex;
    height: 100%;
}

.inner-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.inner-col.vertical-toolbar {
    display: flex;
    flex: none;
    width: 100px;
    align-items: center;
    justify-content: center;
}

.toolbar {
    white-space: nowrap;
}

.vertical-toolbar > span {
    padding: 10px;
    margin: 10px;
    cursor: default;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-modify: none;
}

button.factory {
    height: 25px;
    border-radius: 5px;
    border: none;
    color: white;
    outline: none;
    cursor: pointer;
}

button i {
    margin-right: 10px;
}

.bin i {
    transform: scale(1);
    transition: transform 500ms;
}

.factory-red {
    background-color: #cc333344;
}

.factory-green {
    background-color: #33cc3344;
}

.factory-blue {
    background-color: #2244cc44;
}

.red-row {
    background-color: #cc333344;
}

.green-row {
    background-color: #33cc3344;
}

.blue-row {
    background-color: #2244cc44;
}

index.html

<div class="example-wrapper">
    <div class="inner-col">
        <div class="toolbar">
            <button class="factory factory-red" data-color="Red" data-side="left">
                <i class="far fa-plus-square"></i>Add Red
            </button>
            <button class="factory factory-green" data-color="Green" data-side="left">
                <i class="far fa-plus-square"></i>Add Green
            </button>
            <button class="factory factory-blue" data-color="Blue" data-side="left">
                <i class="far fa-plus-square"></i>Add Blue
            </button>
        </div>
        <div id="eLeftGrid" style="height: 100%" class="inner-col"></div>
    </div>

    <div class="inner-col vertical-toolbar">
        <span class="bin">
            <i class="far fa-trash-alt fa-3x"></i>
        </span>
    </div>
    <div class="inner-col">
        <div class="toolbar">
            <button class="factory factory-red" data-color="Red" data-side="right">
                <i class="far fa-plus-square"></i>Add Red
            </button>
            <button class="factory factory-green" data-color="Green" data-side="right">
                <i class="far fa-plus-square"></i>Add Green
            </button>
            <button class="factory factory-blue" data-color="Blue" data-side="right">
                <i class="far fa-plus-square"></i>Add Blue
            </button>
        </div>
        <div id="eRightGrid" style="height: 100%" class="inner-col"></div>
    </div>
</div>

Dragging Multiple Records Between Grids Copy Link

It is possible to drag multiple records at once from one grid to another.

In the example below, note the following:

This example enables Multi-Row Dragging between grids using rowDragMultiRow.
When Remove Source Rows is selected, the rows will be removed from the Athletes grid once they are dropped onto the Selected Athletes grid.
If Only Deselect Source Rows is selected, all selected rows that were copied will be deselected but will not be removed.
Note: If some rows are selected and a row that isn't selected is copied, the selected rows will remain selected.
If None is selected, the rows will be copied from one grid to another and the source grid will stay as is.

main.ts

import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ICellRendererComp,
  ICellRendererParams,
  ModuleRegistry,
  RowDragModule,
  RowSelectionModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  TextFilterModule,
  RowDragModule,
  RowSelectionModule,
  ClientSideRowModelModule,
]);

class SportRenderer implements ICellRendererComp {
  eGui!: HTMLElement;

  init(params: ICellRendererParams) {
    this.eGui = document.createElement("i");

    this.eGui.addEventListener("click", () => {
      params.api.applyTransaction({ remove: [params.node.data] });
    });

    this.eGui.classList.add("far", "fa-trash-alt");
    this.eGui.style.cursor = "pointer";
  }

  getGui() {
    return this.eGui;
  }

  refresh(params: ICellRendererParams): boolean {
    return false;
  }
}

const leftColumnDefs: ColDef[] = [
  {
    rowDrag: true,
    maxWidth: 50,
    suppressHeaderMenuButton: true,
    suppressHeaderFilterButton: true,
    rowDragText: (params, dragItemCount) => {
      if (dragItemCount > 1) {
        return dragItemCount + " athletes";
      }
      return params.rowNode!.data.athlete;
    },
  },
  { field: "athlete" },
  { field: "sport" },
];

const rightColumnDefs: ColDef[] = [
  {
    rowDrag: true,
    maxWidth: 50,
    suppressHeaderMenuButton: true,
    suppressHeaderFilterButton: true,
    rowDragText: (params, dragItemCount) => {
      if (dragItemCount > 1) {
        return dragItemCount + " athletes";
      }
      return params.rowNode!.data.athlete;
    },
  },
  { field: "athlete" },
  { field: "sport" },
  {
    suppressHeaderMenuButton: true,
    suppressHeaderFilterButton: true,
    maxWidth: 50,
    cellRenderer: SportRenderer,
  },
];
let leftApi: GridApi;
const leftGridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  rowSelection: {
    mode: "multiRow",
  },
  rowDragMultiRow: true,
  getRowId: (params: GetRowIdParams) => {
    return params.data.athlete;
  },
  rowDragManaged: true,
  suppressMoveWhenRowDragging: true,
  columnDefs: leftColumnDefs,
  onGridReady: (params) => {
    addGridDropZone(params);
  },
};
let rightApi: GridApi;
const rightGridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  getRowId: (params: GetRowIdParams) => {
    return params.data.athlete;
  },
  rowDragManaged: true,
  columnDefs: rightColumnDefs,
};

function addGridDropZone(params: GridReadyEvent) {
  const dropZoneParams = rightApi!.getRowDropZoneParams({
    onDragStop: (params) => {
      const deselectCheck = (
        document.querySelector("input#deselect") as HTMLInputElement
      ).checked;
      const moveCheck = (
        document.querySelector("input#move") as HTMLInputElement
      ).checked;
      const nodes = params.nodes;

      if (moveCheck) {
        leftApi!.applyTransaction({
          remove: nodes.map(function (node) {
            return node.data;
          }),
        });
      } else if (deselectCheck) {
        leftApi!.setNodesSelected({ nodes, newValue: false });
      }
    },
  });

  params.api.addRowDropZone(dropZoneParams);
}

function loadGrid(
  options: GridOptions,
  oldApi: GridApi,
  side: string,
  data: any[],
) {
  const grid = document.querySelector<HTMLElement>("#e" + side + "Grid")!;

  oldApi?.destroy();

  options.rowData = data;
  return createGrid(grid, options);
}

function resetInputs() {
  const inputs = document.querySelectorAll(
    ".example-toolbar input",
  ) as NodeListOf<HTMLInputElement>;
  const checkbox = inputs[inputs.length - 1];

  if (!checkbox.checked) {
    checkbox.click();
  }

  inputs[0].checked = true;
}

function loadGrids() {
  fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
    .then((response) => response.json())
    .then(function (data) {
      const athletes: any[] = [];
      let i = 0;

      while (athletes.length < 20 && i < data.length) {
        const pos = i++;
        if (
          athletes.some(function (rec) {
            return rec.athlete === data[pos].athlete;
          })
        ) {
          continue;
        }
        athletes.push(data[pos]);
      }

      leftApi = loadGrid(leftGridOptions, leftApi, "Left", athletes);
      rightApi = loadGrid(rightGridOptions, rightApi, "Right", []);
    });
}

const resetBtn = document.querySelector("button.reset")!;

resetBtn.addEventListener("click", () => {
  resetInputs();
  loadGrids();
});

loadGrids();

style.css

.top-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.example-toolbar label {
    margin: 0 15px 0 0;
}

.example-toolbar input[type='radio'] {
    margin: 0 0.25rem 0 0;
}

.grid-wrapper {
    display: flex;
    flex: 1 1 auto;
    margin-top: 5px;
}

.grid-wrapper .panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.grid-wrapper .panel-body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
    display: flex;
}

.grid-wrapper .panel-body > div {
    width: 100%;
}

index.html

<div class="top-container">
    <div class="example-toolbar panel panel-default">
        <div class="panel-body">
            <input type="radio" id="move" name="radio" checked />
            <label for="move">Remove Source Rows</label>
            <input type="radio" id="deselect" name="radio" />
            <label for="deselect">Only Deselect Source Rows</label>
            <input type="radio" id="none" name="radio" />
            <label for="none">None</label>
            <span class="input-group-button">
                <button type="button" class="btn btn-default reset" style="margin-left: 5px">
                    <i class="fas fa-redo" style="margin-right: 5px"></i>Reset
                </button>
            </span>
        </div>
    </div>
    <div class="grid-wrapper">
        <div class="panel panel-primary" style="margin-right: 10px">
            <div class="panel-heading">Athletes</div>
            <div class="panel-body">
                <div id="eLeftGrid"></div>
            </div>
        </div>
        <div class="panel panel-primary" style="margin-left: 10px">
            <div class="panel-heading">Selected Athletes</div>
            <div class="panel-body">
                <div id="eRightGrid"></div>
            </div>
        </div>
    </div>
</div>

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridRow Dragging Between Grids

Adding a Grid as Target Copy Link

Dragging Multiple Records Between Grids Copy Link