Warning 'grid zero width' when using ag-Grid's sizeColumnsToFit() on two separate ag-Grids, displayed by a tab menu

Question

Getting the warning below when resizing ag-Grid (change size of browser window) and switching between two tabs:

ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?

I have reproduced the situation in a Stackblitz:

https://angular-jpmxjy.stackblitz.io/

Here is the composition of the test app:

• PrimeNG p-tabMenu at the component: header.component
• ag-Grid at the components: delleverancer.component and leverancer.component.

You will see the warning error in chrome dev tools, when you resize the grid and switch between tabMenu 'Leverancer' and 'Delleverancer'.

You can see the code here:

https://stackblitz.com/edit/angular-jpmxjy

How do I remove this unwanted warning error?

Answer 1

These kind of errors usually mean that you have a memory leak in your application.

After looking at your code I noticed how you subscribe to window:resize event

window.addEventListener("resize", function () { ...

You should know that this subscription will be still there even after component has been destroyed.

You could write removeEventListener in ngOnDestroy hook. But for that you have to keep reference to original attached function. A better way would using dedicated Angular @HostListener decorator that will take responsibility for removeEventListener under the hook:

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

Forked Stackblitz

To not repeat yourself you can create directive like:

ag-grid-resize.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[ag-grid-resize]'
})
export class AgGridResizeDirective {
  private gridApi;

  @HostListener('window:resize')
  onResize() {
    if (!this.gridApi) return;

    setTimeout(() => {
      this.gridApi.sizeColumnsToFit();
    });
  }

  @HostListener('gridReady', ['$event'])
  onGridReady(params) {
    this.gridApi = params.api;

    params.api.sizeColumnsToFit();
  }
}

Now, all you need to add that behavior is to add attribute to your grid:

<ag-grid-angular 
  ...
  ag-grid-resize       <============
>
</ag-grid-angular>

Stackblitz Example

Answer 2

Old thread, but for the react answer and future sufferers, I was having the same problem and the issue was cleaning up the event listener with componentWillUnmount.

To see whats happening with your event listeners use (in Chrome) getEventListeners(window) and watch how your components add them but don't remove them when you change pages, etc. After implementing the solution below you should see the event listeners are removed when your component is destroyed.

Need to use a function for listener so you have proper reference to remove.

Assuming class based approach:

export class someAgGrid extends Component { your brilliance }

componentWillUnmount() {
     window.removeEventListener('resize', this.daListener);
 };

daListener = () => {
    if (!this.gridApi) return;
    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 200);
 };

firstDataRendered = (params) => {
    this.gridApi = params.api;
    this.gridApi.sizeColumnsToFit();
    window.addEventListener('resize', this.daListener);
 };

in render function:

return (
     <div className='ag-theme-material'>
        <AgGridReact
            ...your stuff
            onFirstDataRendered={this.firstDataRendered}
        />
     </div>
 )