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()
  )
}

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

no feedback, closing.