尽管在ag-grid中使用sizeColumnsToFit，也不必要的水平滚动条出现了

Question

我已将农业网格版本从7.2.0升级到v14.2.0。当我将sizeColumnsToFit()api与onGridReady或onGridSizeChangedevent 一起使用时，它可以工作，但可以保持不必要的水平滚动，这可能是由于网格宽度计算错误所致。

这个问题（？）也可以在此处的ag-grid官方示例中看到，

https://www.ag-grid.com/javascript-grid- responseness /＃example-example1

在以前的版本中，无需任何水平滚动即可完全正常工作。

当我手动调用时$scope.gridOptions.api.sizeColumnsToFit()，它将删除水平滚动。

这是我的gridOptions：

        $scope.ag_grid_options = {
            headerHeight: 50,
            rowHeight: 50,
            //rowModelType: 'virtual',
            rowModelType: 'infinite',
            rowBuffer: 0,
            cacheOverflowSize: 1,
            infiniteInitialRowCount: 1,
            cacheBlockSize: 50,
            paginationPageSize: 50,
            //virtualPaging: true,
            enableServerSideSorting: true,
            enableSorting: false,
            enableColResize: true,
            angularCompileRows: true,
            onGridSizeChanged: function (param) {
                $scope.ag_grid_options.api.doLayout();
                $scope.ag_grid_options.api.sizeColumnsToFit();
            },
            columnDefs: grid_column_definitions
        };

我知道我可以使用属性preventHorizo​​ntalScroll = true。但是我不想使用它，因为有了它，当用户手动调整列大小时，滚动将不会出现。

Answer 1

对我来说最好的解决方案是在 modelUpdated 事件上调用 api.sizeColumnsToFit()

无需设置Timeout和设置宽度

示例代码：

<ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (modelUpdated)="onModelUpdated()"
>
</ag-grid-angular>

在 onModelUpdated() 中应该调用 api.sizeColumnsToFit

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onModelUpdated(): void {
  this.sizeToFit();
}

sizeToFit(): void {
  this.gridApi.sizeColumnsToFit();
}

Answer 2

这不是错误，它是一个功能。如果所有列的总宽度计数大于您的包装器，则会出现滚动条。您应该更改headerFields 的minWidth/maxWidth属性，您会没事的。

var columnDefs = [
  {headerName: 'Athlete', field: 'athlete', minWidth: 150},
  {headerName: 'Age', field: 'age', minWidth: 50},
  {headerName: 'Country', field: 'country', minWidth: 120},
  {headerName: 'Year', field: 'year', minWidth: 90},
  {headerName: 'Date', field: 'date', minWidth: 110}
];

旁注： 如果网格数据由于范围更改或未初始定义而更改，则需要sizeColumnsToFit()在新的摘要圈中调用，例如setTimeout(() => {this.gridApi.sizeColumnsToFit();});.

Answer 3

我遇到了相同/类似的问题。根本问题是我在添加垂直滚动条之前调整了列的大小。要解决此问题，请在添加行后调整大小。即便如此，如果没有超时，它也可能无法工作

    this.http.get('someEndPoint').subscribe(rows => {
      this.rowData = rows;
      setTimeout(()=>{params.api.sizeColumnsToFit()}, 50);
    });

这可能与 OP 看到的症状不同，但可能对其他人有用。