Ag-grid row drag drop - Cannot read property 'forEach' of undefined

Question

On one of our react website we implemented ag-grid and have row grouping and row dragging functionality enabled.

While trying to drag a row from group 1 to group 50 (far away group) in which auto dragging scrolling occurs then i am getting error generated in Aggrid js file. Below is the stack trace from console -

ag-grid-community.cjs.js:26975 Uncaught TypeError: Cannot read property 'forEach' of undefined at RowDragFeature.webpackJsonp../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.RowDragFeature.stopDragging (ag-grid-community.cjs.js:26975) at RowDragFeature.webpackJsonp../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.RowDragFeature.onDragStop (ag-grid-community.cjs.js:26966) at DragAndDropService.webpackJsonp../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.DragAndDropService.onDragStop (ag-grid-community.cjs.js:17368) at DragService.webpackJsonp../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.DragService.onUpCommon (ag-grid-community.cjs.js:31179) at DragService.webpackJsonp../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.DragService.onMouseUp (ag-grid-community.cjs.js:31174) at HTMLDocument.mouseUpEvent (ag-grid-community.cjs.js:31074)

Please suggest on how should i proceed / fix this error.

jdimmerman jdimmerman · Accepted Answer · 2020-06-26T20:41:30

This may be a bug in the default handlers that ag-grid provides. I'm also getting this on a project I started today. You can supply your own handlers for all of the props, which solved the problem for me.

I ran into this for grid to grid, and did the following. If you're using in-grid dragging, you should be able to do something similar, though it looks like the props have different names (such as onDragEnd instead of onDragStop). This assumes that you're managing state yourself and therefore taking action on dragEnd, etc.

Example for grid to grid dragging:

const dropZoneParams = {
  onDragging: (args) => console.log('onDragging', {...args}),
  onDragEnter: (args) =>
    console.log('onDragEnter', {...args}),
  onDragLeave: (args) =>
    console.log('onDragLeave', {...args}),
  onDragStop: (args) => console.log('onDragStop', {...args}),
  getContainer: params.api.getRowDropZoneParams().getContainer,
}

Ag-grid row drag drop - Cannot read property 'forEach' of undefined

1 Answers