渲染后,ag-grid将不会滚动

时间:2019-01-16 20:26:58

标签: ag-grid ag-grid-angular

已解决:原来我导入的CSS不正确会导致一些非常严重的问题,请阅读答案以获取更多详细信息

实施ag-grid后,数据正​​在显示,但我根本无法滚动。

我在这里进行了一次堆叠突击:https://stackblitz.com/edit/angular-ytr1jj。 stackblitz可以正常工作,但是由于某些原因,完全相同的代码无法在我的应用程序中滚动。enter image description here

我尝试了多种渲染行的方法。 我试过弄乱CSS,看是否有什么引起滚动条重叠。 bar is inaccesible

到目前为止没有运气。我认为这可能与“指针事件”有关。

更新:我认为虚拟滚动需要在行上捕获鼠标事件,由于某种原因,没有捕获鼠标事件,因此无法滚动

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

更新2:如果我将pointer-events: none设置为.ag-center-cols-viewport,则能够使滚动条滚动。 html似乎在滚动更新,并且行索引row-id等在滚动时也在更新,但是表视图似乎不显示未插入ref =“ ag-center-cols-viewport的当前行”(它们出现在html中,但不可见)

1 个答案:

答案 0 :(得分:2)

答案

好吧,这有点荒谬,但是在这里

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';

再次检查我的package.json后,我发现我在依赖项下有3件事ag-grid

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

我要导入的CSS来自旧版本的"ag-grid"。 从package.json中删除"ag-grid"后,我导入了正确的CSS,并且一切都可以立即使用...

最终商品代码

// 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';