ag-grid无限行模型—块的预缓存

Question

I'm using the ag-grid infinite row model and notice when I reach the end of a block, the fetch of the next block happens. Is there a way I can trigger this fetch a number of rows before the user reaches scrolling to that point so the view looks more seamless? eg pre-caching blocks before reaching the end of a block?

Answer 1

Yes this is possible. We have implemented the same, although our main concern was not to prefetch rows but rather implement clean Redux with Ag-Grid-For-Angular. It is hacky though, so you have been warned. Also note that I have removed all the Angular-specific parts, so this solution should work with native JS/TS (with help of RXSJ) as well, in theory. But I have not tested it myself. Please report whether you had success or not. Now let's get started:

In the gridOptions-object, you have the possibility to set:

onViewportChanged: (event: ViewportChangedEvent) => {
    // here you have access to event.firstRow and event.lastRow
    // On initialization, firstRow is 0 and lastRow -1
}

But this is not doing what you think it does. ViewportChangedEvent does not represent the block of currently visible elements on the screen but rather the last loaded block (with elements that might not be in viewport yet). But you will still need this information to calculate the distance between what has been fetched and where you are on the screen right now.

For the second needed piece of information (eg where you are right now), you do have access to another method, but this is something I got from the AgGrid-Founder Niall Crosby's comment on GitHub, it is not in the official documentation and not in the Typescript-interface of AgGrid:

First you need to define a field

private _onAgGridBodyScroll$ = new Subject<BodyScrollEvent>();

Because the scrolling will happen many times a second you and want to use debounceTime to handle only a maximum number of scroll events. Then you need to push the actual viewport-events into the Observable/Subject. So after defining gridOptions, do:

(this.gridOptions as any).onBodyScroll = ((bodyScrollEvent: BodyScrollEvent) =>
    this._onAgGridBodyScroll$.next(bodyScrollEvent));

Since as I mentioned, onBodyScroll is not officially documented, it is also not in the GridOptions interface, this is why I do the cast as any

this._onAgGridBodyScroll$
  .takeUntil(this._destroy$)
  .debounceTime(200)
  .subscribe(() => {
    const allRows: HTMLElement[] = this._hostEl.nativeElement.getElementsByClassName('ag-row');
    if (allRows.length < 1) {
      return;
    }
    // aggrids viewport-rows can be inserted in a wrong/random order in the DOM, but they always have the right index-attribute:
    let biggestIndexInViewport: number = Number(allRows[0].getAttribute('row-index'));
    for (let i = 1; i < allRows.length; i++) {
      const itemIndexByAttr: number = Number(allRows[i].getAttribute('row-index'));
      if (itemIndexByAttr > biggestIndexInViewport) {
        biggestIndexInViewport = itemIndexByAttr;
      }
    }
    // so now you have the reference to the last visible row
    // note that by flipping the > you can also find out the first visible row
    // so when you destroy aggrid and reinitialize it again
    // with all the fetched items you have in your redux-store, 
    // you can scroll-to-top to the same row where you have been before
  });

Now, having both the reference to the last fetched block as well as the last visible item you can control the requests yourself. Just set the distance between those two parameters and call your httpClient and update the array of your items. The only thing left now is to set the fetched items in the grid-model:

  // do this in onGridReady():
  this.gridOptions.api.setDatasource({
    rowCount: null, // behave as infinite scroll
    getRows: (params: IGetRowsParams) => this.onGetRows(params)
  } as IDatasource);

  // and define:
  private onGetRows(params: IGetRowsParams): void {
    this.artikelArray$
      .takeUntil(this._destroy$)
      .filter((myItems: MyItems[]) => (!!myItems[params.startRow]))
      // do not check for endrow because request is always of static size, but response might be smaller
      .take(1) // unsubscribe after first handled value
      .subscribe(rowsToDisplay => {
        const limit: number = params.endRow >= this._totalCount ? this._totalCount : -1; // the smaller limit or none at all
        // in case you have new information concerning maximum size:
        params.successCallback(rowsToDisplay, limit);
      });
  }

Note that _totalCount is the maximum number of rows you can get for a chunked request. You get this information from your backend-query, for example Lucene/ElasticSearch. You can also set limit to -1, in which case you can always scroll down, but the rows will never be loaded.

Also note that when fetching things by yourself, the first block needs to be fetched manually because this._onAgGridBodyScroll$ will only get triggered and cause subsequent fetches if there is some data in the viewport already. This is the Angular-specific part that I mentioned (in Angular you would do this in the initialization-lifecycle-hook "OnInit").

That's it! Hope it helps. Actually I am working on a blog article about this with pictures and stuff; I will add a link here when it's finished. If you have any suggestions, please comment.