Error infinite scrolling when change cache block size

[ltduc]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid/blob/master/CONTRIBUTING.md#question

Current behavior
I uses pagination infinite scrolling follow link: https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination.

When I change cacheBlockSize, paginationSetPageSize() to new pageSize.

But It not working, it still use old pageSize.

Expected behavior
After changing cacheBlockSize then grid paging to new pageSize.

Minimal reproduction of the problem with instructions
https://plnkr.co/edit/W7IlWNczaBdTVVBydW3r?p=preview

• ag-Grid version: X.X.X

ag-Grid version: v16.0.0

• Browser:

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[tzachshabtay]

I'm getting a similar bug with ag-grid react. After the first time changing the cache block size, other changes to it are ignored. I even tried giving the containing div a completely different id, expecting that react will then identify the grid as a completely new one, but it still uses the old cache block size. Also turning off pagination completely seems to be ignored if I had it enabled in the beginning (I want to have an "all" option in my page size drop-down).

EDIT: paginationAutoPageSize also does not refresh. Sigh.

[hugobaes]

I was able to change the cacheBlockSize by resetting the internal cache before updating the Page Size.

// Force new cache block size by resetting internal cache
this.gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
this.gridOptions.api.infinitePageRowModel.resetCache();

// After that, update the pageSize through the api
this.gridOptions.api.paginationSetPageSize(pageSize);

The downside is that the previous cache is lost.

[makinggoodsoftware]

Hi,

These properties are not meant to be changed dynamically, as @hugobaes mentions this can be somehow workaround it by resetting the cache.

I am going to close this ticket since I think we won't be looking at making this properties dynamic

Thanks

[Klinton90]

Even though ticket is closed, but it still appears as first result in Google.
There are already couple solutions, I post mine.
I'm using Angular/Typescript, and my fetish to use only public API (api.gridOptionsWrapper and api.infinitePageRowModel.resetCache() both are private).

Looking at code of InfiniteRowModel, I can see, that cache is reset on filterChanged and sortChanged events (at least at 19.* version). So my method to update page size:

setPaginationPageSize(size: number): void {
        this.gridOptions.cacheBlockSize = size;
        this.gridOptions.paginationPageSize = size;
        this.api.onSortChanged();
}

[Ruud-cb]

@Klinton90 I am not sure how you use gridOptions, but after setting those two values, onSortChanged() does fire a new request for getting data, but it is still has the old pagination size. Also tried adding this.gridOptions.api.paginationSetPageSize(size); but no luck :(.

@hugobaes gridOptionsWrapper and infinitePageRowModel are both private :( typescript doesn't allow me to call private fields.

@makinggoodsoftware Perhaps this can be re-considered to be implemented? When the default export function wants to be used, it only exports the rows that are loaded. When one wants to export all data then the user would need to scroll down until the last item. Changing the cacheBlockSize will help in loading all data at once and then export it.

[tzachshabtay]

@Ruud-cb you should still be able to call private fields in typescript if you cast to any (i.e something like this):

const api: any = this.gridOptions.api;
api.infinitePageRowModel.resetCache();

[hugobaes]

I remember I had to call the internal method gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize); because the properties
of gridOptions are used only once when ag-grid is initialized, after that changing they don't work anymore.

As @makinggoodsoftware said, they are not meant to be changed dynamically, so it is a workaround using private api.

[BerghuisPeter]

@hugobaes what do you mean a private api? im trying this in angular and typescript but it won't work...
could you elaborate ?

[Klinton90]

Here is all logic that I have:
Template:

<select [ngModel]="getPaginationPageSize()" (ngModelChange)="setPaginationPageSize($event)">
   <option *ngFor="let size of gridOptions.context.paginationPageSizes" [ngValue]="size">{{size}}</option>
</select>

Component:

getPaginationPageSize(): number {
    // fallback to return first page size, when grid is loaded from provided array
   // where `gridOption.context` - is custom object that I provide to my ag-grid component wrapper with configuration
    return this.api ? this.api.paginationGetPageSize() : this.gridOptions.context.paginationPageSizes[0];
}

setPaginationPageSize(size: number): void {
    this.gridOptions.cacheBlockSize = size;
    this.gridOptions.paginationPageSize = size;
    this.updateGridHeight();
    this.api.onSortChanged();
}

private updateGridHeight(): void {
    if (!this.gridOptions.paginationAutoPageSize) {
        const filterRowsCount = this.gridOptions.columnDefs.find(column => !this.isColGroupDef(column) && !!column.filter) ? 2 : 1;
        this.gridHeight = (this.gridOptions.paginationPageSize * this.gridOptions.rowHeight + (this.gridOptions.headerHeight * filterRowsCount) + 2) + 'px';
    }
}

private isColGroupDef(col: ColDef | ColGroupDef): col is ColGroupDef {
    return 'children' in col;
}

private datasource: IDatasource = {
    getRows: this.getRows.bind(this)
};

private onInit() {
    this.gridOptions.suppressPaginationPanel = true;

    if (!this.gridOptions.datasource && this.gridOptions.context.resource) {
        this.gridOptions.datasource = this.datasource;
    }
}

private getRows(params: IGetRowsParams): void {
    const newParams: IGetRowsParams = _.cloneDeep(params);
    // ... do other manipulations with params, e.g. add extra filters/hardcoded sorting etc.
   this.gridOptions.context.resource.findByGenericFilters(newParams).subscribe((response: PageableResonseModel) => {
        params.successCallback(response.content, response.totalElements);
    });
}

@BerghuisPeter
Private API means that some methods in AgGrid are declared as export class PrivateApiClass { private privateMethod(): void {} }. From OOP POV you cannot/should not use them. But JS nature of TS allow you to do that via (<any>this.privateApiClass).privateMethod()