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

Question

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

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.

Solution 1

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();});.

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 5

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).

View more solutions

Comments

[lolplayer101]

how is this a solution? it doesn't give you the desired results. here you have to calculate yourself so it doesn't overflow and create a horizontal scrollbar.

[lin]

@lolplayer101 feel free to add a answer which may help others :)

[blazehub]

sizeColumnsToFit needs be called before rendering data on grid

[solbs]

@blazehub is correct -- The above code is a repeated call to sizeColumnsToFit()

[Rodrigo Borba]

It can not be called as feature. If you have only two columns, and its content is a short string it also happens. Actually it seems like the AgGrid is calculating horizontal size without the vertical scroll. This answer should not be marked as correct.

[Rodrigo Borba]

Unfortunately the page is not available anymore

[codenamezero]

Is there, is just that they keep changing their source structure. I've updated the link.

[lin]

@RodrigoBorba this nothing depending on AG Grid. This happends if your container is not on full width - check this example - next.plnkr.co/edit/…. And 4 sure a scrollbar is feature how else would you be able to see the content which width is bigger than the rendered ag grid view container... The scrollbar appears even if you use sizeColumnsToFit() see here: next.plnkr.co/edit/e7e02hE6AxbvjPJJ Thats why my answer is right.

[Rodrigo Borba]

@lin, overflow scroll is indeed a feature, but not is this case. Imagine that you do not have a minWidth/maxWidth defined on columns definition. sizeColumnsToFit gets total width and divides it by columns visible. 1000 px of width divided by 2 columns would result on 500 px per column, which still less than 1000 px available, meaning that there is no reason for a x-overflow-x be shown.

[lin]

@RodrigoBorba I dont understand. Please create a fiddle and show me your problem. Anyway, thanks for the downvote. -.-

[Rodrigo Borba]

There is no personal pleasure in downvote a answer. It has to do with the fact that it is not the correct answer. You have assumed that the amount of columns that @undefined is using is bigger than horizontal space when no information about it was given. Please, check stackblitz below: stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit try with both RowData initialization.

[lin]

@RodrigoBorba it doesnt work, because you calling this.gridApi.sizeColumnsToFit(); in the same diggest circle where you set the data. Simply call this.gridApi.sizeColumnsToFit(); in a new diggest circle and you will be fine - stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit-qw3jri The answer is still correct: =] It works the same if you define the minWidth instead of using sizeColumnsToFit().

[Rodrigo Borba]

Ok, now you gave a correct answer for it. Setting size of columns is a limited workaround. For example, it would be impossible to handle with dynamic columns. Please, edit your answer and I will upvote instead :)

[Rodrigo Borba]

Seems like the best approach for it.

[lin]

@RodrigoBorba I updated my answer for your case. The user did not give any information about his data binding or data changes. Thats why the original answer is still correct. Welcome to stackoverflow =).

[Rodrigo Borba]

Actually I'm here for a while already, Lin... Kindly take a look at: stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit-dvzn7d and please explain to me why there is a overflow-x. Before anwser me, try to add more columns and remove some os them and check the behavior.

[PeterS]

This is probably undesirable in a mobile environment where the user can change widths, no matter how ugly a scrollbar is, you simply will not be able to view all the table.

[Zoman]

This has worked for me, thanks!

[Campey]

This should be the accepted answer. In my case I had to set this.dataGrid.api.setRowData(this.formData); and then this.dataGrid.api.sizeColumnsToFit();

[Alex S.]

This is the only worked for me - thank you!