grid.store.load() issues with preserveScrollOnDatasetChange

[gregc]

For grid-5.6.2/build/grid.module.min.js

• multiline row grid
• with preservScrollOnDatasetChange : true, when you call
• grid.store.load
• while several pages down the content
• you end up with a blank page and have to scroll to try to get back to where you were, and you are lost at that point.

see attached

[ghulam.ghous]

Hi there,

I checked your code and tried to run it but was unable to do so as there few functions missing. But I tried checking in our online examples and tried to reproduce the behaviour but was unable to do so. I set the preserveScrollOnDatasetChange: true http://lh/bryntum-suite-release/Grid/examples/columndragtoolbar/ and tried loading the store and the scroll was persisted. Check the attached clip.

Are you able to reproduce the behaviour in our online examples? If yes show us through a clip or steps. Otherwise please share a runnable code so we can check and assist you in a better way. Thanks.

Screen Recording 2024-01-24 at 4.52.36 PM.mov

(12.25 MiB) Downloaded 18 times

Regards,
Ghous

[gregc]

The online examples don't really show issues well since AJAX causes its own subtle bugs. I think I'm going to abandon using preservScrollOnDatasetChange and just scroll to a row on load instead since the setting has caused a lot of problems in the past.

[ghulam.ghous]

Hi,

I have tried using a mocked ajax request to load data but still I was unable to reproduce the problem. Please see the following snippet code to see what I did, I loaded the grid with initial 100 records and then hit the ajax mock url to load 1000000 records:

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/NumberColumn.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';
import AjaxHelper from '../../lib/Core/helper/AjaxHelper.js';

AjaxHelper.mockUrl('load', {
    responseText : JSON.stringify({
        success : true,
        data    : DataGenerator.generateData(1000000)
    })
});

new Grid({
    appendTo : 'container',

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    }, {
        text  : 'Age',
        field : 'age',
        width : 100,
        type  : 'number'
    }, {
        text  : 'City',
        field : 'city',
        flex  : 1
    }, {
        text  : 'Food',
        field : 'food',
        flex  : 1
    }, {
        text     : 'Color (not sortable)',
        field    : 'color',
        flex     : 1,
        sortable : false,
        renderer({ cellElement, value }) {
            // renderer that sets text color = text
            cellElement.style.color = value;
            return value || '';
        }
    }
],

preserveScrollOnDatasetChange : true,
store                         : {
    readUrl  : 'load',
    autoLoad : false
},
data : DataGenerator.generateData(100)

});

You can use our basic grid example to test it out https://bryntum.com/products/grid/examples/basic/. See here how mock url works https://bryntum.com/products/grid/docs/api/Core/helper/AjaxHelper#function-mockUrl-static

Regards,
Ghous