ag-grid won't scroll after rendering

Question

SOLVED: turns out I was importing the incorrect CSS which causes some pretty severe issues, read answer for more details

After implementing ag-grid, data is showing but I am unable to scroll at all.

I made a stackblitz here: https://stackblitz.com/edit/angular-ytr1jj. The stackblitz works as expected but, for some reason, the exact same code fails to scroll in my app.

I have tried multiple ways of rendering the rows. I have tried messing with the CSS to see if there is anything causing an overlap in the scrollbar.

so far no luck. I think it might have something to do with "pointer events"...

Update: I think that the virtual scroll requires the mouse event to be captured on the row, and for some reason the mouse event is not being captured and therefore can't scroll

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 600px;"
  class="ag-theme-balham"
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  >
</ag-grid-angular>


columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 }
  ];

UPDATE 2: I am able to get the scrollbar to scroll if i set pointer-events: none to .ag-center-cols-viewport. the html seems to be updating on scroll and the row-index row-id etc is updating as it scrolls, however the table view seems to not to not show the current rows being inserted into the ref="ag-center-cols-viewport" (they are appearing in the html but they are not visible)

Arron McCrory Arron McCrory · Accepted Answer · 2019-01-17T21:47:31

ANSWER

okay so, this is a bit ridiculous but here it goes

BAD
@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-material.css";

GOOD
@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-material.css';

After checking my package.json again I noticed I had 3 things of ag-grid under dependencies

"ag-grid",
"ag-grid-angular",
"ag-grid-community"

The CSS I was importing was from the old version of "ag-grid". After removing "ag-grid" from package.json I imported the proper CSS and everything worked immediately...

Final Good Code

// package.json
    "ag-grid-angular": "^20.0.0",
    "ag-grid-community": "^20.0.0",

// _vendor.scss where I import most my node_modules css

    // @import "~ag-grid/dist/styles/ag-grid.css";
    // @import "~ag-grid/dist/styles/ag-theme-material.css";
    @import 'ag-grid-community/dist/styles/ag-grid.css';
    @import 'ag-grid-community/dist/styles/ag-theme-material.css';

ag-grid won't scroll after rendering

1 Answers