CODEWITHSUNDEEP
angularag-gridag-grid-angular
MikePR
MikePR

Reputation: 2986

autosize columns in ag-grid when Maximizing browser

I have the following code on Angular for the ag-grid:

.ts file:

constructor(private myService: MyService) {
    this.defaultColDef = { resizable: true };
    this.getRowNodeId = data => data.id;
   }

  columnDefs = [
    {headerName: 'Edit', width: 55, resizable: false, cellRendererFramework: EditButtonComponent, cellRendererParams: { inRouterLink: 'editProject/' } },
    {headerName: 'Column 1', field: 'field_1', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 2', field: 'field_2', sortable: true, filter: true, unSortIcon: true  },
    {headerName: 'Column 3', field: 'field_3', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 4', field: 'field_4', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 5', field: 'field_5', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 6', field: 'field_6', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 7', field: 'field_7', sortable: true, filter: true, unSortIcon: true },
  ];


onGridReady(params) {
    params.api.sizeColumnsToFit();
  }

.Html file:

 <ag-grid-angular
          id="gridProject"
          style="width: 90%;"
          class="ag-theme-blue"
          domLayout='autoHeight'
          [rowData]="rowData" 
          [columnDefs]="columnDefs"
          [suppressMenuHide]="true"
          [defaultColDef]="defaultColDef"
          [getRowNodeId]="getRowNodeId" 
          (gridReady)="onGridReady($event)"
          alwaysShowVerticalScroll="false"
          suppressHorizontalScroll="false"
          rowSelection='single'>
      </ag-grid-angular>

When the browser first lunch in Maximaze mode all the columns are render OK.

However, when the browser is lunch in Minimize mode and then click the Maximize button, the browser gets Maximize but the columns width are still the same as in Minimize mode.

How could I let the columns auto size when Maximizing the browser?

Btw, the sizeColumnsToFit works OK to fit the columns for the full width of the grid but not when Maximizing it.

Upvotes: 0

Views: 2494

Answers (1)

wentjun
wentjun

Reputation: 42526

You can achieve the above by putting your ag-grid component inside a Flexbox container. This will allow your grid to resize accordingly to any changes to the browser, or window, and subsequently, the parent container of your grid.

<div style="display: flex; flex-direction: row">
  <div style=" overflow: hidden; flex-grow: 1">
    <ag-grid-angular
      id="gridProject"
      style="width: 90%;"
      class="ag-theme-blue"
      domLayout='autoHeight'
      [rowData]="rowData" 
      [columnDefs]="columnDefs"
      [suppressMenuHide]="true"
      [defaultColDef]="defaultColDef"
      [getRowNodeId]="getRowNodeId" 
      (gridReady)="onGridReady($event)"
      alwaysShowVerticalScroll="false"
      suppressHorizontalScroll="false"
      rowSelection='single'>
    </ag-grid-angular>  
  </div>
</div>

You may have noticed that we have set the overflow CSS property to hidden. This is because the ag-grid documentation states that

By default, the grid runs a timer that watches its container size and resizes the UI accordingly. This might interfere with the default behavior of elements with display: flex set. The simple workaround is to add overflow: hidden to the grid element parent.

Here is a demo.

Upvotes: 1

Related Questions