CODEWITHSUNDEEP
angularag-gridag-grid-angular
ACEG
ACEG

Reputation: 2041

ag-grid & angular: autoSizeColumns() truncates cell text

I am using ag-grid v21 & Angular 6, with a server side row model. I want to automatically resize the column widths, but the behaviour is not quite what I expect.

As I am getting data asynchronously, I do a gridColumnApi.autoSizeColumns(...) when I get the data in onGridReady() (I also tried doing this in onFirstDataRendered(), but it had the same behaviour).

This renders the data like this, truncating the values (screenshot 1):

enter image description here

If I trigger the column resize manually by double clicking the vertical column separator, like in Excel, the column is resized to what I want (screenshot 2):

enter image description here

My question is: how can I achieve the behaviour from screenshot 2 automatically?

(Is this a timing problem, i.e. when I manually resize by double clicking, the grid has more information than upon the initial rendering and that's why the column is resized correctly?)

EDIT: Seems to be a timing issue. I am now resizing in onGridSizeChanged(), and sometimes (when onGridReady() takes longer (?), and onGridSizeChanged() is called after onGridReady()), it resizes correctly.

EDIT2: Solved, sort of. It is a specific aspect of my use case that causes the ambiguous timing, see comments below.

Upvotes: 1

Views: 8491

Answers (1)

Alexander Zbinden
Alexander Zbinden

Reputation: 2541

Event though your initial problem seems to be related to a timing issue, there's still another problem: ag grid cannot calculate the size of the column based on rows that have not been rendered yet.

From the ag grid reference:

autoSizeColumns() looks at the rendered cells on the screen, and works out the width based on what it sees. It cannot see the columns that are not rendered due to column virtualisation. Thus it is not possible to autosize a column that is not visible on the screen.

https://www.ag-grid.com/javascript-grid-resizing/#auto-size-columns

Upvotes: 1

Related Questions