CODEWITHSUNDEEP
javascriptdrag-and-dropag-gridag-grid-react
jdimmerman
jdimmerman

Reputation: 174

React ag-grid - identifying overnode when dragging grid to grid

I'm using ag-grid with react. I have one non-tree grid and on tree grid. I'd like to be able to reorder in both, re-parent in the tree grid, and drag from grid to grid. I'm running into two particular problems and am unsure if ag-grid supports my use cases.

When dragging from grid to grid, I can use the following to get the dropzone params from one grid and set them on the other.

const grid1DropzoneParams = {
  onDragging: (e) => console.log('onDragging - grid1', {...e}),
  onDragEnter: (e) => console.log('onDragEnter - grid1', {...e}),
  onDragLeave: (e) => console.log('onDragLeave - grid1', {...e}),
  onDragStop: (e) => console.log('onDragStop - grid1', {...e}),
  getContainer: grid1Api.getRowDropZoneParams().getContainer,
};
grid2Api.addRowDropZone(grid1DropzoneParams);

Unfortunately in the event past from one grid to the other, the e.overNode value is not properly set. It is either null or refers to a value from the source grid (in this case, some entity from grid2 instead of the actual entity being hovered over in grid1). As a result, when I drag from one grid to another, I cannot determine which item I am dragging over (or between).

In the ag-grid examples I've found in the docs, I only see references to dragging from grid to grid with the grids being general buckets, rather than being able to drag from one grid and reorder/reparent in another as an atomic operation (or, in other words, choose the location of the source entity in the target grid during initial drag from grid to grid). Is my only option to fully handle dnd manually with dndSource=true on the source grid? dndSource doesn't play well with rowDrag, which means that I would need to manually handle all DnD, even within a grid (I believe).

Somewhat related, but probably worth a separate question, I am unable to reorder in the tree grid. I can re-parent by dragging over, but not drag in between two siblings (or to the top/bottom of a list). Again, the only ag-grid examples I can find are tree grids showing re-parenting but not reordering within or between parents.

Upvotes: 0

Views: 1037

Answers (2)

Spikolynn
Spikolynn

Reputation: 4173

I have the same problem and am working around it by using

const rowElement = args.event.srcElement.closest('[role=row]');
if (rowElement) {
    const id = rowElement.getAttribute('row-id');
    const targetNode = this.gridOptions.api.getRowNode(id);
}

Upvotes: 0

jdimmerman
jdimmerman

Reputation: 174

I found a solution here, in case it helps anyone else. I am using rowDrag=true and an external dropzone. In order to get the entity being dragged over on the external grid, I'm using the following (wherein gridApiRef is the react ref to the grid's api)

const getAgGridNodeBeingDraggedOver(dragEvent) {
  const elements = document.elementsFromPoint(
    dragEvent.event.clientX,
    dragEvent.event.clientY
  )
  const agGridRow = elements.find((r) => r.classList.contains('ag-row'))
  if (agGridRow) {
    const idOfRow = agGridRow.getAttribute('row-id')
    const rowNode = gridApiRef.current.getRowNode(idOfRow)
    return rowNode
  }
  return null
}

Upvotes: 1

Related Questions