ag-grid: [angular1] Angular 1.X Scope Based Child Grid not getting destroyed (Memory Leak)

I have implemented the scope based master details grid to achieve the angularCompileRows: true in the child grid, this.MD will be unique ID

DetailPanelCellRenderer.prototype.destroy = function () {
                console.log($scope["detailGridOptions" + this.MD])
                if ($scope["detailGridOptions" + this.MD].api !== null)
                    $scope["detailGridOptions" + this.MD].api.destroy();
                else
                    delete $scope["detailGridOptions" + this.MD];
            };

So destroy method not happening due to api is null while collapse, But JS based sub grid have api. This Leading the Memory Leak

Grid Objects still in memory because destroy not happen, Please provide solution !

Thanks

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 32 (11 by maintainers)

Most upvoted comments

@ceolter @seanw

I found a fix for this… I’m not gonna make a pull request since it’s really simple. Just do this:

RenderedRow.prototype.angular1Compile = function (element) {
	        if (this.scope) {
	            var compiledRow = this.$compile(element)(this.scope);
	            this.destroyFunctions.push(function() {
	                compiledRow.remove();
	            });
	        }
	    };

Instead of

RenderedRow.prototype.angular1Compile = function (element) {
	        if (this.scope) {
	            this.$compile(element)(this.scope);
	        }
	    };

Can you please push this in as a fix.

Enjoy 😃

DrorOzgaon on Feb 10, 2017

@ceolter @DrorOzgaon Amazing! But…works for me in ag-grid@7.2.2 with Angular 1.6.2 but not in ag-grid@8.0.1. Any guesses why based on finding the previous fix?

Ag-grid 8.0.1 will give this error when you destroy the grid:

angular.js:14290 Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
      at RenderedCell.destroy (/node_modules/ag-grid/dist/ag-grid.js:13437:30)
      at /node_modules/ag-grid/dist/ag-grid.js:12894:81
      at /node_modules/ag-grid/dist/ag-grid.js:12784:18
      at Function.Utils.iterateObject (/node_modules/ag-grid/dist/ag-grid.js:1595:14)
      at RenderedRow.forEachRenderedCell (/node_modules/ag-grid/dist/ag-grid.js:12782:24)
      at RenderedRow.destroy (/node_modules/ag-grid/dist/ag-grid.js:12894:15)
      at /node_modules/ag-grid/dist/ag-grid.js:7755:26
      at Array.forEach (native)
      at RowRenderer.removeVirtualRows (/node_modules/ag-grid/dist/ag-grid.js:7753:23)
      at RowRenderer.destroy (/node_modules/ag-grid/dist/ag-grid.js:7707:15)

The top function in the trace is this:

RenderedCell.prototype.destroy = function () {
	        _super.prototype.destroy.call(this);
	         if (this.eParentRow) {
	            this.eParentRow.removeChild(this.getGui());
	             this.eParentRow = null;
	         }
	        if (this.cellEditor && this.cellEditor.destroy) {
	            this.cellEditor.destroy();
	        }
	        if (this.cellRenderer && this.cellRenderer.destroy) {
	            this.cellRenderer.destroy();
	        }
	    };

Version 7 is missing the if (this.eParentRow) block. If I just comment out this block in version 8 it seems to fix the leak but the table renders as if the cells have been duplicated and placed on top of each other at an offset.

That’s what I’ve tried so far but feel out of my depth understanding how ag-grid does its cleanup and what changed between versions.

seanw on Feb 14, 2017