Angular ag-grid resize issue

Question

I want to enable column resizing but in the same time I want to avoid the case when the user resize any column to the left side of the grid and doing this a blank space appers on the right of the last column. I attached a picture below to explain what I'm trying to achieve.

score 3 · Accepted Answer · answered Dec 20 '17 at 22:56

Something like this should do for you. Main point is to listen for the columnResized event, then check if the current column size total is larger than the grid width, if so then use the sizeColumnsToFit function. Be careful with this though; the sizeColumnsToFit function will try to maintain ratios of the columns, so perhaps you would prefer to size all the columns to 10px, then size to fit. It mostly depends on your use case and how you want it to behave.

score 2 · Answer 2 · answered Aug 21 '19 at 06:54

This issue can be fixed by using columnResized event and sizeColumnsToFit() method of gridApi.

component.ts:

onColumnResized(params) {
  if (params.source === 'uiColumnDragged' && params.finished) {
    this.gridApi.sizeColumnsToFit();
  }
}

component.html:

<ag-grid-angular 
  #agGrid
  style="width: 100%; height: 100%;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (columnResized)="onColumnResized($event)">
</ag-grid-angular>

score 0 · Answer 3 · answered Nov 05 '21 at 13:05

0

If you want to fill the space within the rows, on column resize, then I would suggest overwriting the CSS. At the time of writing the following worked:

.ag-center-cols-container { width: 100% !important;}

answered Nov 05 '21 at 13:05

Akk3d1s

211
3
8

Angular ag-grid resize issue

3 Answers3