CODEWITHSUNDEEP
javascriptangularjsag-grid
undefined
undefined

Reputation: 3632

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

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.

Upvotes: 26

Views: 27329

Answers (9)

Brad W
Brad W

Reputation: 190

I added the following CSS and it seemed to fix the problem (I'm using ag-grid 28.1.1):

.ag-center-cols-viewport {
    overflow-x: hidden;
}

Upvotes: 0

Arun Kumar
Arun Kumar

Reputation: 209

This approach is for Angular 2+, use sizeColumnsToFit() inside firstDataRendered event instead of gridReady or gridSizeChanged event it will remove the horizontal scrollbar.

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

private gridApi;

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

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

Upvotes: 0

anurag sharma
anurag sharma

Reputation: 19

for large scroll appearing in scrollbar, we need to make use of onGridReady event on the grid, which gives gridApi as parameter in callback function and make use of sizeColumnsToFit function to keep the resizing work.

If the scroll length is small, it is appearing because of the width introduced for the vertical sidebar (due to the change in vertical height of the grid).

My Solution:

  1. Locate the element's selector which is causing vertical scrollbar to appear.
  2. It will have overflow/overflow-y to "auto/scroll". Making it to overflow/overflow-y to "overlay" will resolve your problem.

This worked for me everywhere.

Upvotes: 1

H.Azizkhani
H.Azizkhani

Reputation: 923

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

Upvotes: 9

James
James

Reputation: 1780

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.

Upvotes: 1

lin
lin

Reputation: 18402

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

Upvotes: 6

codenamezero
codenamezero

Reputation: 3079

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

Upvotes: 4

solbs
solbs

Reputation: 1068

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.

Upvotes: 10

schuno
schuno

Reputation: 585

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

Upvotes: 2

Related Questions