Warning 'grid zero width' when using ag-Grid's sizeColumnsToFit() on two separate ag-Grids, displayed by a tab menu
Solution 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();
});
}
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>
Solution 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>
)
Related videos on Youtube
Rune Hansen
Mid-level full stack developer. 6 years full time professional working experience, mostly in MS Environments. Currently I am into Flutter & Dart.
Updated on June 04, 2022Comments
-
Rune Hansen almost 2 years
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?
-
benshabatnoam over 5 yearsWas about of answering the same. Wouldn't change a word you've wrote. Nice answer. Loved the extra suggestion for @HostListener and directive
-
AKJ about 5 yearsHi, if I am looking for a similar version for React, could you suggest how I can solve this issue?
-
blankface about 4 yearsWhat's the
setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 200);
for? You're already callingsizeColumnsToFit()
insidefirstDataRendered
. -
AhammadaliPK about 4 yearsnot working , showing the same error , gridPanel.js:814 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? even if i called sizetoFit after onFirstDataRendered event
-
yurzui almost 4 years@DevinMcQueeney Can you please reproduce it in stackblitz?