Angular ag-grid 调整大小问题

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.

Answer 1

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.

Answer 2

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>

Answer 3

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