ag grid horizontal scroll - html

Question

I have used ag-grid ng in angular application. when number of columns exceeds not getting the horizontal scroll bar.

Answer 1

Are you sure is because of the number of columns? I had the same problem and the solution was take off the pinned option of every column.
For example if you have this:
{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}
it has to be:
{headerName: "Athlete", field: "athlete", width: 150}

Answer 2

You can just say,
gridOptions.api.sizeColumnsToFit();
This will set the columns width and hence remove horizontal scrolling.

Answer 3

Sure you haven't got the suppressHorizontalScroll property on the gridOptions object set to true have you ?
var gridOptionsTop = {
columnDefs: columnDefs,
// don't show the horizontal scrollbar on the top grid
suppressHorizontalScroll: false,
enableSorting: true,
};

Answer 4

Try putting in minWidth across EACH columnDefs in ag-grid, this makes sure each has a width prop associated with it, so then if it overflows, a horizontal scroll-bar appears below
columnDefs = [
{minWidth : 100, field: 'a', headerName: 'test1'},
{minWidth: 120, field: 'b', headerName: 'test2'},
{minWidth: 80, field: 'c', headerName: 'test2'}
]

Answer 5

What you may find if you use:
gridOptions.api.sizeColumnsToFit();
Is that some pages take quite a time to shuffle out into the display.
What I found is that there is a flag on the api to show whether the width is dirty or not. Therefore I implemented a method of checking this:
refreshTable() {
if (this.gridColumnApi.columnController && this.gridColumnApi.columnController.bodyWidthDirty) {
this.gridApi.sizeColumnsToFit();
if (this.refreshAttempts) {
this.refreshAttempts--;
setTimeout(() => {
this.refreshTable();
}, 100);
}
} else {
this.refreshAttempts = 0;
}
}
I put this in a service class with an initialiser, the refresh attempts is passed into that too. I suggest going around twice, you may also want to play with the timeout delay as you may not wish such a large one.
The reason this seems to be happening is on some more complex grids is that one shuffle results in a bit of work but the width is still dirty. The next and maybe next one will help.