I'm working on a Node/React javascript app. I've configured ag-grid to display a master grid and then a detail grid per each row as per the documentation. Both grids display correctly, but upon collapsing the rowGroup (clicking on the agGroupCellRenderer of an row displaying a detail grid) the destroy process for the detail grid is stopped by an exception saying "refreshEvent is not a function". This leaves the master grid truncated and in rendering state, so that no api methods may be called without throwing further exceptions.
I have tried destroying the detail grid calling event.node.detailNode.detailGridInfo.api.destoy(); on onRowGroupOpened but the problem seem to happen before getting there.
Here is some code where I replace the agGroupCellRenderer with my own implementation. The exception is the same with either implementation:
this.chartButtonCellRenderer = params => {
var display = `<br /><a href="#">
<span style="color:#CCCCCC;font-size:16px"><i class="fas fa-chart-bar" /></span ></a>`;
return display;
};
this.currencyFormatter = params => {
return '$' + this.formatNumber(params.value);
};
this.formatNumber = number => {
return number.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
};
this.detailCellRendererParams = {
// provide detail grid options
detailGridOptions: {
columnDefs: [
{
headerName: 'date',
chartDataType: 'category',
field: 'date'
},
{
headerName: 'SKU',
field: 'sku'
},
{
headerName: 'Name',
field: 'name'
},
{
headerName: 'Tier',
chartDataType: 'series',
field: 'tier'
},
{
headerName: 'Price',
chartDataType: 'series',
field: 'price'
},
{
headerName: 'Likes',
chartDataType: 'series',
field: 'likes'
}
]
},
// extract and supply row data for detail
getDetailRowData: function(params) {
params.successCallback(params.data.historicRecords);
}
};
this.state = {
errormsg: [],
successmsg: [],
modules: [ClientSideRowModelModule, MasterDetailModule, MenuModule, ColumnsToolPanelModule],
columnDefs: [
{
colId: 'chart',
headerName: '',
field: 'sku',
cellRenderer: this.chartButtonCellRenderer,
//cellRenderer: 'agGroupCellRenderer',
//showGroup: false,
width: 50
},
{
headerName: 'Image',
field: 'image',
cellRenderer: this.imageCellRenderer,
width: 75
},
{
headerName: 'Name',
field: 'name',
chartDataType: 'category',
cellRenderer: this.titleCellRenderer
},
{
headerName: 'Tier',
chartDataType: 'series',
field: 'tier'
},
{
headerName: 'Price',
chartDataType: 'series',
field: 'price',
valueFormatter: this.currencyFormatter
},
{
headerName: 'Likes',
chartDataType: 'series',
field: 'likes'
}
],
overlayLoadingTemplate:
'<span class="ag-overlay-loading-center">Please wait while product data loads</span>',
enableCharts: true,
masterDetail: true,
defaultColDef: {
editable: false,
sortable: true,
flex: 0,
minWidth: 20,
autoHeight: true,
filter: true,
resizable: true
},
detailCellRendererParams: this.detailCellRendererParams,
rowData: []
};
}
onCellClicked(event) {
console.log('A cell was clicked', event.value, event.colDef, event.column);
event.node.setExpanded(!event.node.expanded);
}
onRowGroupOpened = event => {
var detailGridApi = event.node.detailNode.detailGridInfo.api;
if (event.node.expanded) {
console.log('Row group opened:', event);
var title = event.data.title;
var start = 0;
var end = event.data.historicRecords.length - 1;
this.renderDetailChart(start, end, title, detailGridApi);
} else {
//on collapse
console.log('Row group collapsed:', event);
if (this.mainChart) {
this.mainChart = this.mainChart.destroyChart();
this.mainChart = null;
}
var chartparams = this.configureChart(0, 10, 'line', 'Main', ['salesrank', 'price', 'reviews']);
this.mainChart = event.api.createRangeChart(chartparams);
}
};
Here is the stack trace:
ag-grid-enterprise.cjs.js:4160 Uncaught TypeError: refreshEvent is not a function
at ag-grid-enterprise.cjs.js:4160
at ag-grid-community.cjs.js:12228
at Array.forEach (<anonymous>)
at RowGroupDropZonePanel.BeanStub.destroy (ag-grid-community.cjs.js:12227)
at RowGroupDropZonePanel.Component.destroy (ag-grid-community.cjs.js:12685)
at RowGroupDropZonePanel.BaseDropZonePanel.destroy (ag-grid-enterprise.cjs.js:4141)
at ag-grid-enterprise.cjs.js:4843
at ag-grid-community.cjs.js:12228
at Array.forEach (<anonymous>)
at GridHeaderDropZones.BeanStub.destroy (ag-grid-community.cjs.js:12227)
at GridHeaderDropZones.Component.destroy (ag-grid-community.cjs.js:12685)
at ag-grid-community.cjs.js:12689
at Array.forEach (<anonymous>)
at GridCore.Component.destroy (ag-grid-community.cjs.js:12687)
at GridCore.destroy (ag-grid-community.cjs.js:35948)
at GridApi.destroy (ag-grid-community.cjs.js:34185)
at ag-grid-enterprise.cjs.js:40655
at ag-grid-community.cjs.js:12228
at Array.forEach (<anonymous>)
at DetailCellRenderer.BeanStub.destroy (ag-grid-community.cjs.js:12227)
at DetailCellRenderer.Component.destroy (ag-grid-community.cjs.js:12685)
at DetailRowCompCache.destroyFullWidthRow (ag-grid-community.cjs.js:44310)
at DetailRowCompCache.addOrDestroy (ag-grid-community.cjs.js:44241)
at RowComp.destroyFullWidthComponents (ag-grid-community.cjs.js:24433)
at RowComp.destroy (ag-grid-community.cjs.js:25331)
at ag-grid-community.cjs.js:26470
at ag-grid-community.cjs.js:1074
at Array.forEach (<anonymous>)
at Function.Utils.iterateObject (ag-grid-community.cjs.js:1073)
at RowRenderer.destroyRowComps (ag-grid-community.cjs.js:26464)
at RowRenderer.redraw (ag-grid-community.cjs.js:26347)
at RowRenderer.redrawAfterModelUpdate (ag-grid-community.cjs.js:25964)
at RowRenderer.onModelUpdated (ag-grid-community.cjs.js:25890)
at RowRenderer.onPageLoaded (ag-grid-community.cjs.js:25823)
at ag-grid-community.cjs.js:4229
at Set.forEach (<anonymous>)
at processEventListeners (ag-grid-community.cjs.js:4223)
at EventService.dispatchToListeners (ag-grid-community.cjs.js:4236)
at EventService.dispatchEvent (ag-grid-community.cjs.js:4207)
at PaginationProxy.onModelUpdated (ag-grid-community.cjs.js:38239)
at ag-grid-community.cjs.js:4229
at Set.forEach (<anonymous>)
at processEventListeners (ag-grid-community.cjs.js:4223)
at EventService.dispatchToListeners (ag-grid-community.cjs.js:4236)
at EventService.dispatchEvent (ag-grid-community.cjs.js:4207)
at ClientSideRowModel.refreshModel (ag-grid-community.cjs.js:47767)
at ClientSideRowModel.onRowGroupOpened (ag-grid-community.cjs.js:47642)
at ag-grid-community.cjs.js:4229
at Set.forEach (<anonymous>)
at processEventListeners (ag-grid-community.cjs.js:4223)
(anonymous) @ ag-grid-enterprise.cjs.js:4160
(anonymous) @ ag-grid-community.cjs.js:12228
BeanStub.destroy @ ag-grid-community.cjs.js:12227
Component.destroy @ ag-grid-community.cjs.js:12685
BaseDropZonePanel.destroy @ ag-grid-enterprise.cjs.js:4141
(anonymous) @ ag-grid-enterprise.cjs.js:4843
(anonymous) @ ag-grid-community.cjs.js:12228
BeanStub.destroy @ ag-grid-community.cjs.js:12227
Component.destroy @ ag-grid-community.cjs.js:12685
(anonymous) @ ag-grid-community.cjs.js:12689
Component.destroy @ ag-grid-community.cjs.js:12687
GridCore.destroy @ ag-grid-community.cjs.js:35948
GridApi.destroy @ ag-grid-community.cjs.js:34185
(anonymous) @ ag-grid-enterprise.cjs.js:40655
(anonymous) @ ag-grid-community.cjs.js:12228
BeanStub.destroy @ ag-grid-community.cjs.js:12227
Component.destroy @ ag-grid-community.cjs.js:12685
DetailRowCompCache.destroyFullWidthRow @ ag-grid-community.cjs.js:44310
DetailRowCompCache.addOrDestroy @ ag-grid-community.cjs.js:44241
RowComp.destroyFullWidthComponents @ ag-grid-community.cjs.js:24433
RowComp.destroy @ ag-grid-community.cjs.js:25331
(anonymous) @ ag-grid-community.cjs.js:26470
(anonymous) @ ag-grid-community.cjs.js:1074
Utils.iterateObject @ ag-grid-community.cjs.js:1073
RowRenderer.destroyRowComps @ ag-grid-community.cjs.js:26464
RowRenderer.redraw @ ag-grid-community.cjs.js:26347
RowRenderer.redrawAfterModelUpdate @ ag-grid-community.cjs.js:25964
RowRenderer.onModelUpdated @ ag-grid-community.cjs.js:25890
RowRenderer.onPageLoaded @ ag-grid-community.cjs.js:25823
(anonymous) @ ag-grid-community.cjs.js:4229
processEventListeners @ ag-grid-community.cjs.js:4223
EventService.dispatchToListeners @ ag-grid-community.cjs.js:4236
EventService.dispatchEvent @ ag-grid-community.cjs.js:4207
PaginationProxy.onModelUpdated @ ag-grid-community.cjs.js:38239
(anonymous) @ ag-grid-community.cjs.js:4229
processEventListeners @ ag-grid-community.cjs.js:4223
EventService.dispatchToListeners @ ag-grid-community.cjs.js:4236
EventService.dispatchEvent @ ag-grid-community.cjs.js:4207
ClientSideRowModel.refreshModel @ ag-grid-community.cjs.js:47767
ClientSideRowModel.onRowGroupOpened @ ag-grid-community.cjs.js:47642
(anonymous) @ ag-grid-community.cjs.js:4229
processEventListeners @ ag-grid-community.cjs.js:4223
EventService.dispatchToListeners @ ag-grid-community.cjs.js:4235
EventService.dispatchEvent @ ag-grid-community.cjs.js:4207
RowNode.setExpanded @ ag-grid-community.cjs.js:15209
onCellClicked @ Dashboard.js:163
GridOptionsWrapper.globalEventHandler @ ag-grid-community.cjs.js:11776
(anonymous) @ ag-grid-community.cjs.js:4241
(anonymous) @ ag-grid-community.cjs.js:4280
EventService.flushAsyncQueue @ ag-grid-community.cjs.js:4279
setTimeout (async)
EventService.dispatchAsync @ ag-grid-community.cjs.js:4262
(anonymous) @ ag-grid-community.cjs.js:4240
EventService.dispatchToListeners @ ag-grid-community.cjs.js:4238
EventService.dispatchEvent @ ag-grid-community.cjs.js:4206
FocusController.onCellFocused @ ag-grid-community.cjs.js:36925
FocusController.setFocusedCell @ ag-grid-community.cjs.js:36854
CellComp.focusCell @ ag-grid-community.cjs.js:22988
CellComp.onMouseDown @ ag-grid-community.cjs.js:23184
CellComp.onMouseEvent @ ag-grid-community.cjs.js:22635
GridPanel.processMouseEvent @ ag-grid-community.cjs.js:32223
suppressRefresh: true? Does this change anything? Even if that is not what you want, it could help narrow down to problem. I found that in this example: ag-grid.com/javascript-grid-master-detail/… – Pauloco