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

6 Answers

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} 

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

You can just say,

gridOptions.api.sizeColumnsToFit(); 

This will set the columns width and hence remove horizontal scrolling.

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

In my application we use ag-grid and we have 3 columns pinned(left). My problem was that I could see the horizontal scrollbar, but when you scroll to the right, the scroll would stop two or three columns short. You could use the mouse wheel or track pad to continue the scroll to the end and see all columns.

Solution: Chrome/Brave

.ag-horizontal-left-spacer { visibility: hidden; } 

Solution: Safari

.ag-horizontal-left-spacer { visibility: hidden; } .ag-body-horizontal-scroll-viewport { overflow-x: auto; } 

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.

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa2tqaWiDcn6Omp5mn6KesW60zqugs6eeqa6tedKcqaiknA%3D%3D