Infinite Scroll in Ag-grid Details Grid

Question

How to set infinite scroll/Pagination in the details grid. I'm using server side model for master and want to use infinite model for details. How to setup details grid detailCellRendererParams with infinite scroll row Data

Would it be possible to get code example? What means details grid and what stands for master? — kamil-kubicki

kamil-kubicki kamil-kubicki · Accepted Answer · 2019-12-13T20:04:03

Define in detailGridOptions infinite row model type & its properties:

detailGridOptions: {
    ...
    rowModelType: 'infinite',
    // enable pagination
    pagination: true,
    // fetch 15 rows per at a time
    cacheBlockSize: 15,
    // display 10 lines per page
    paginationPageSize: 10,
    // how many rows to seek ahead when unknown data size.
    cacheOverflowSize: 2,
    // how many concurrent data requests are allowed.
    // default is 2, so server is only ever hit with 2 concurrent requests.
    maxConcurrentDatasourceRequests: 2,
    // how many rows to initially allow scrolling to in the grid.
    infiniteInitialRowCount: 1,
    // how many pages to hold in the cache.
    maxBlocksInCache: 2
}

The infiniteDatasource presents the way you can retrieve the data for detail part:

getDetailRowData: (params) => {
    //Get grid api regarding current row 
    var detailGrid = gridOptions.api.getDetailGridInfo(params.node.id);
    //Simulation of server
    var server = new FakeServer(params.data.callRecords);
    //Preparation of data
    var datasource = new infiniteDatasource(server, params);
    detailGrid.api.setDatasource(datasource);
}

Please note that regarding the documantation:

If you are an enterprise user you should consider using the Server-side row model instead of the infinite row model. It offers the same functionality with many more features.

Setting of Server-side row model should be similar to Infinite one.

Working example

Infinite Scroll in Ag-grid Details Grid

1 Answers