ag-grid: sizeColumnsToFit breaks if multiple ag-grids exist on different tabs

An example of this is when you have 3 tabs. Calling sizeColumnsToFit would sometimes return an error that the grid is coming back with zero width. That is because it calls a function: getWidthForSizeColsToFit which uses an ebody that is set to be a global selector for .ag-body. This wouldn’t work if you have multiple grids hidden by tabs as you see from the below console code.

document.querySelectorAll(".ag-body").forEach((x) => console.log(x.clientWidth))
0
1678
0

This is only tested in chrome but it seems that it’s either a bug or a there’s missing documentation about how to use ag-grid within multiple tabs? (using bootstrap tabs atm).

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 20 (4 by maintainers)

Most upvoted comments

@ceolter I am having a similar issue because I call sizeColumnsToFit on all grids based on resize. The grids that are hidden throw an error. Will you accept a PR that exposes a method that returns the grid Width from api. ie getWidthForSizeColsToFit() which sizeColumnsToFit uses internally. Basically I want to do the following to avoid the message in console

onGridReady(params) {
  window.resize(() =>
    // if there is already a call to get the grd width on api object let me know...i couldn't find one
    params.api.getWidthForSizeColsToFit() && params.api.sizeColumnsToFit()
  )
}

ab320012 on Jun 25, 2018

My workaround is to add a (select)="onTabSelect($event)" on the <tab>, and call sizeToFit when the tab is being clicked on.

angelayanpan on Dec 4, 2018

no feedback, closing.

ceolter on Jan 20, 2017