CODEWITHSUNDEEP
javascriptangularag-gridag-grid-reactag-grid-ng2
Catalin
Catalin

Reputation: 762

Angular ag-grid resize issue

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.

enter image description here

Upvotes: 4

Views: 5573

Answers (3)

Akk3d1s
Akk3d1s

Reputation: 236

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;}

Upvotes: 0

Jobayer Ahmmed
Jobayer Ahmmed

Reputation: 2076

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>

Upvotes: 2

Jarod Moser
Jarod Moser

Reputation: 7338

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.

Upvotes: 3

Related Questions