Our blazing fast Grid component built with pure JavaScript


Post by zettersten »

Hello,

I am using the Bryntum Grid with Angular 9.1.4.

How to I do custom pagination with the common OData URL query param specification, top and skip, where skip indicates the record index of which needs to skip?

Example: ?top=1 // give me a total of 1 record
Example: ?skip=10 // give me records starting from 10

Full example: ?top=10&skip=10 // give me 10 records starting from the 10th record in the database

Post by Animal »

If I understand your requirements correctly, you just need to configure the Store with
pageSize : 10,
pageStartParamName : 'skip', // Note that this is zero based.
pageSizeParamName : 'top'    // So first page will be requested using ?skip=0?top=10

Post by zettersten »

We've already made changes to the parameter names. The change of parameter names is functional.
However, this question pertains to the values that the grid pagination appends to the query params.

Current grid:

Clicking "next" or page "2" on the pagination UI button makes an ajax request with the "pageStartParamName" incremented by 1. This is where our bug is. The pageStartParam name must increment by the pageSize value.

Example:

Page 1 should be "?top=10&skip=0"
Page 2 should be "?top=10&skip=10"
Page 3 should be "?top=10&skip=30"

So the question is, how can we modify how the pageStart value so that it increments ```+=``` by the pageSize value?

Top in ODATA terms is how many records you want to see.
Skip in ODATA terms is how many records you want to offset from zero.

Post by Animal »

It does not increment the pageStart parameter. It calculates it:
    async loadPage(page, params) {
        if (this.allCount) {
            page = Math.min(page, this.lastPage);
        }
        const
            me        = this,
            pageParam = me.pageParamName ? {
                [me.pageParamName] : page
            } : {
                [me.pageStartParamName] : (page - 1) * me.pageSize // <-- this is the code path that you need
            };

        pageParam[me.pageSizeParamName] = me.pageSize;
        return me.internalLoad(Object.assign(pageParam, params), 'Page', (event) => {
            // We go directly to loadPage because paging a tree store is unsupportable.
            // loadPage will trigger the refresh event with { action: 'pageLoad' }
            me.loadData(event.data, 'pageLoad');
        });
    }
    
If you have used 'pageParamName' by mistake, then it will look like what you report.

if you use pageStartParamName, then you can see that it requests page start (page - 1) * me.pageSize

Post by zettersten »

Thank you, 'pageStartParamName' has fixed the issue.

Post Reply