unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid

15
votes

I have upgraded my ag-grid version from 7.2.0 to v14.2.0. When I use sizeColumnsToFit() api with onGridReady or onGridSizeChanged event, it works but it keeps unnecessary horizontal scroll, may be due to wrong calculation of grid width.

This issue(?) can be seen at official example for ag-grid as well here,

https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1

Un-necessary scroll

With the previous version, this works completely fine without any horizontal scroll.

When I manually call $scope.gridOptions.api.sizeColumnsToFit(), then it removes the horizontal scroll.

Here is my 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
        };

I know I can use property suppressHorizontalScroll= true. But I do not want to use this because with it, scroll will not appear when user will resize the column manually.

6
javascriptangularjsag-grid
Please create a plnkr/fiddle to reproduce your problem. - lin
This is reproducible on official example as well.. see here ag-grid.com/javascript-grid-responsiveness/#example-example1 @lin - undefined
This is a normal behavior. A scrollbar pops up if the total column width is bigger than the container. It's not a bug, its a feature.Changing minWidth property of headerFields will enable this scroll bar. - lin
hello... no one (here me) want to have scroll bar unnecessary.. if u have downvoted due to this.. then u should understand that.. i am looking for a solution to not have this scroll bar. - undefined
ok.. my apologies @lin - undefined

6 Answers

5
votes

I ran into the same/similar issue. The root problem was that I resized my columns before a vertical scrollbar was added. To get around this, resize AFTER adding the rows. Even then it may not work without a timeout

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

This may be a different symptom than what the OP saw, but could be useful for others.

5
votes

It's no a bug, its a feature. A scrollbar appears if the total width count of all columns is bigger than your wrapper. You should change minWidth / maxWidth property of headerFields and you will be fine. 

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

Side note: If the grid data is changed due to scope changes or not initial defined you need to recall sizeColumnsToFit() in a new diggest circle like setTimeout(() => {this.gridApi.sizeColumnsToFit();});.

2
votes

Another possible solution, just presented to me by a collegue:

Within the column defs you can set the width for each column by calculating the the client width, and then dividing it by the number of columns:

width: (document.documentElement.clientWidth - 40) / (this.numColumns)

In this case, 40 is the sum of the padding on either side of the grid (20 left + 20 right).

2
votes

the best solution for me is calling api.sizeColumnsToFit() on modelUpdated event

no need to setTimeout and set width

the example code:

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

in onModelUpdated() should call api.sizeColumnsToFit

private gridApi;

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

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

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

A bit late, but for those who is looking for completely disable the horizontal scroll or adjust the horizontal scroll's height (even setting them to 0). You have to also set the scrollbarWidth.

gridOptions: {
   suppressHorizontalScroll: true,
   scrollbarWidth: 0
}

You can take a look at AgGrid's source code on how they deal with horizontal scroll here: https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts#L889

1
votes

This issue remains in v22 and the above solutions didn't seem ideal. The best fix I found was to call sizeColumnsToFit in the onModelUpdated event handler. See https://github.com/ag-grid/ag-grid/issues/2310.