Rows not updated on grid when using paginated AjaxStore with remote sorting

[chuckn0rris]

Forum post

Test code for paged example

let
    rowCount    = BrowserHelper.searchParam('rowCount') || 250,
    pageSize    = BrowserHelper.searchParam('pageSize') || 25,
    currentPage = 1,
    data        = [];

// This intercepts AjaxHelper.fetch calls and calls AjaxHelper's fetch success handling
// method using a mocked up Fetch Response object with the returned object assigned
// over its default properties. Here we just return responseText with the generated data.
AjaxHelper.mockUrl('/pagedMockUrl', (url, params) => {
    const
        page     = parseInt(params.iPage, 10),
        pageSize = parseInt(params.iPageSize, 10),
        startIdx = ((page ? page : 1) - 1) * pageSize;

    if (data.length !== rowCount) {
        data = DataGenerator.generateData(
            rowCount,
            null,
            1
        );
    }

    let returnedData = data.slice();

    // Filter the data if filter parameter is passed
    if (params.filter) {
        returnedData = returnedData.filter(
            CollectionFilter.generateFiltersFunction(
                JSON.parse(params.filter).map(f => {
                    f.property = f.field;
                    return new CollectionFilter(f);
                })
            )
        );
    }

    // Sort the data if sort parameter is passed
    if (params.strSoters) {
        returnedData.sort(store.createSorterFn(JSON.parse(params.strSoters)));
    }
    console.log(returnedData.slice(startIdx, startIdx + pageSize));
    return {
        responseText : JSON.stringify({
            success : true,
            total   : returnedData.length,
            data    : returnedData.slice(startIdx, startIdx + pageSize)
        })
    };
});

const
    maxCount = 1000,
    minCount = 10,
    store    = new AjaxStore({
        modelClass      : GridRowModel,
        readUrl         : '/pagedMockUrl',
        autoLoad: true,
        pageSize: 5, // can be changed to 5, 10, 20, 30, 40 or 50, selector implemented as widget in bbar
        pageSizeParamName: 'iPageSize',
        pageStartParamName: 'iPage',
        sortParamName: 'strSoters',
        listeners: {
            beforeLoadPage: ({ params }) => {
                params.strSearchWord = 'sdfd';
                params.iFilterNumber = 'this.filterNumber';
            },
            beforeSort: event => {
                event.source.params = {
                    strSearchWord: 'this.searchWord',
                    iFilterNumber: 'this.filterNumber'
                }
            }
        }
    });

const grid = new Grid({
    appendTo : 'container',

    store,

    features : {
        filter : true
    },

    columns : [
        { text : '#', type : 'number', width : 80, field : 'id' },
        { text : 'First name', field : 'firstName', flex : 1 },
        { text : 'Surname', field : 'surName', flex : 1 },
        { text : 'Score', field : 'score', flex : 1, type : 'number' },
        { text : 'Rank', field : 'rank', flex : 1, type : 'number' },
        { text : 'Percent', field : 'percent', width : 150, type : 'percent' }
    ],

    tbar : [
        {
            type        : 'number',
            ref         : 'fieldPageSize',
            placeholder : 'Page size',
            label       : 'Page size',
            tooltip     : 'Enter number of records in each page (10 - 100) and press Apply',
            value       : pageSize,
            width       : '11em',
            min         : minCount,
            max         : maxCount,
            step        : 5
        },
        {
            type        : 'number',
            ref         : 'fieldRowCount',
            placeholder : 'Total records',
            label       : 'Records',
            tooltip     : 'Enter number of records to generate (10 - 1000) and press Apply',
            value       : rowCount,
            width       : '11em',
            min         : minCount,
            max         : maxCount,
            step        : 10
        },
        {
            type    : 'button',
            text    : 'Apply',
            ref     : 'buttonApply',
            icon    : 'b-fa-check',
            tooltip : 'Apply page size and number of records to data loader',
            onClick() {
                rowCount    = grid.widgetMap.fieldRowCount.value;
                pageSize    = store.pageSize = grid.widgetMap.fieldPageSize.value;
                currentPage = store.currentPage = store.currentPage ? Math.min(store.currentPage, Math.floor((rowCount + pageSize - 1) / pageSize)) : 1;
                store.loadPage(currentPage, { rows : rowCount });
            }
        }
    ],

    bbar : {
        type  : 'pagingtoolbar'
    }
});

Steps to reproduce:

1. Click on Surname to sort by that column
2. Click next page in pagination widget

See that console.log returned correct page - new dataset
See that grid still display first page data

[fmntf]

Hi. I don't know if is related, also the sort example is broken: https://bryntum.com/examples/grid/php-paged/
If you switch pages without sorting, everything works fine: just one request is done every page switch, and new data is correctly displayed.
If you sort a column, when changing page two requests are sent instead of just one, and new data is not displayed in the grid.

[chuckn0rris]

Dupe #5403