Autosize column not working in ag-Grid with RxJS

Question

I'm using ag-grid for representing some data in UI. I have a problem with auto-sizing columns after setting row data using RxJS.

I have a code which set the data:

this.accountingStoreService.getPurchaseOrders().subscribe(
  purchaseOrders => {
      this.gridApi.setRowData(purchaseOrders);
  }
);

How can I call autoSize to make sure that all data was rendered? I was trying to use processRowPostCreate but it also doesn't work without setting timeout:

this.gridOptions = {
  rowData: this.purchaseOrders,
  processRowPostCreate: (params) => {
    this.generateRowEvents(params);
  },
...
}

public generateRowEvents(params) {
   params.addRenderedRowListener('load', this.autoSizeColumns());
}

public autoSizeColumns() {
    const allColumnIds = [];
    this.gridColumnApi.getAllColumns().forEach(function (column) {
      if (!column.colDef.suppressSizeToFit) {
         allColumnIds.push(column.colId);
      }
    });
    setTimeout(() => {
      this.gridColumnApi.autoSizeColumns(allColumnIds);
    }, 300);
}

But this implementation sometimes works incorrectly.

Is it possible to implement it without using any timeouts or something like that?

Answer 1

The problem is that your autoSizeColumns method is being called before data is rendered on the grid. To solve that you could use a grid event that triggers when the row data changes. ag-Grid documentation has a well-described list of its events, and in your case, I guess rowDataChanged would fit well.

So on your template, you would have something like this:

<ag-grid-angular 
    class="ag-theme-balham"
    [gridOptions]="gridOptions" 
    [rowData]="rowData"
    (gridReady)="onGridReady($event)" 
    (rowDataChanged)="autoSizeAll()">
</ag-grid-angular>

And on your controller:

autoSizeAll() {
    const allColumnIds = this.gridColumnApi.getAllColumns().map((column) => column.getColId());
    this.gridColumnApi.autoSizeColumns(allColumnIds);
}

Just don't forget to initialize this.gridColumnApi on onGridReady event.