Premium support for our pure JavaScript UI components


Post by JussiSa »

Hi,

In the most recent version of Grid (5.1.4) we noticed a strange behaviour: when we have a grid with paginated AjaxStore and a sorter is active, it won't update rows when page is changed. The data is returned from server correctly, but it just won't update the grid. It also makes the request twice, with same payload.

Bug or missing config? Version 5.1.3 doesn't have such problem.

Our grid (somewhat simplified):

new Grid({
    adopt: this.elementRef.nativeElement, // using angular
    store: new AjaxStore({
        readUrl: 'path/to/url',
        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 = this.searchWord;
                params.iFilterNumber = this.filterNumber;
            },
            beforeSort: event => {
                event.srouce.params = {
                    strSearchWord: this.searchWord,
                    iFilterNumber: this.filterNumber
                }
            }
        }
    }),
    // pretty standard column config with mostly field and name properties, no listeners etc..
    columns: [],
    selectionModeOptions: {
        row: false,
        checkbox: false,
        showCheckAll: false,
    },
    listeners: {
        cellClick: () => {
            // cell click event handler
        }
    },
    bbar: {
        type: 'pagingtoolbar'
    }
});

Two same requests on page change, when column is sorted:

chrome_2022-10-05_08-53-31.png
chrome_2022-10-05_08-53-31.png (27.8 KiB) Viewed 226 times

Request response, note only one item (just now noticed pageNumber 0):

chrome_2022-10-05_08-55-05.png
chrome_2022-10-05_08-55-05.png (15.62 KiB) Viewed 226 times

Grid after request done:

chrome_2022-10-05_08-56-08.png
chrome_2022-10-05_08-56-08.png (28.26 KiB) Viewed 226 times

Post by alex.l »

I modified our "pages" demo and I don't see this problem.

Please see the code below, try to paste it into our "paged" Grid example to test. Apply required changes to reproduce the problem, if applicable.

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.sort) {
    returnedData.sort(store.createSorterFn(JSON.parse(params.sort)));
}

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.soruce.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'
}
});

All the best,
Alex


Post by JussiSa »

I did so and the problem occurs.

Steps I did:

  • Paste the code
  • Change page size to 10
  • Sort by one column, for example first number column (#)
  • Click next page

Pagination shows page 2 and "Displaying records 6 - 10 of 250" but rows doesn't update.


Post by alex.l »

Thanks for clarifications! I've reproduced that, this is a bug. I've opened a ticket to fix this. Here is a link to track the status https://github.com/bryntum/support/issues/5369

All the best,
Alex


Post by JussiSa »

Thanks!


Post Reply