[VUE 3] lazyLoad with TreeGrid hangs

[thomas]

Hi, I am evaluating bryntum grid.

We have hierarchical data (3 levels: 2 parent level and 1 leaf level). I use Vue3 with Vite.
I am desperately and without success trying to setup TreeGrid with lazyLoad. When I activate both

tree : true,
lazyLoad: true,

bryntum grid hangs and stays showing the "loadMask" message.

I added eventHandler to see what bryntum is doing. There is not even fired a http request. I see the "onLazyLoadStarted" event happening but nothing else. onBeforeRequest is never triggered.

I don't see a request on the server nor do I see a request in the browsers developer tools network panel.
When I set lazyLoad: false (and let the server render all levels of data) the tree grid shows great.

What can I do? Is there a respective sample? How can I debug? I have spent hours but I don't see how to fix. Thank you for any hint.

My setup is straight forward:

const store = new AjaxStore({
    modelClass : MyModelClass,
    readUrl    : 'http://localhost:8080/read/view/an/allgemein/p-h-1',
    autoLoad   : true,
    tree       : true,
    lazyLoad: { chunkSize: 150 },
    onLazyLoadStarted({ source }) {
        Log.logDebug('onLazyLoadStarted');
    },
    onLazyLoadEnded({ source }) {
        Log.logDebug('onLazyLoadEnded');
    },
    onBeforeRequest({ source, params }) {
        Log.logDebug('onBeforeRequest');
    },
    onBeforeLoad({ source }) {
        Log.logDebug('onBeforeLoad');
    },
    onLoadStart({ source, response }) {
        Log.logDebug('onLoadStart');
    },
});

const useGridConfig = () => {
    return {
        store,
        selectionMode : {
            row          : true,
            checkboxOnly : false
        },
        stateId           : 'taesy-tree-grid',
        animateTreeNodeToggle : false,
        cellEditFeature   : false,
        filterBarFeature  : false,
        rowReorderFeature : false,
        stripeFeature     : true,
        treeFeature       : true,
        autoHeight        : false,
        height            : scrollHeight,
        rowHeight         : 25,
        rowResizeFeature  : false,
        loadMask: 'Einen Moment bitte...',
        columns : [
            {
                id: 1,
                text        : 'Node Label',
                field       : 'nodeLabel',
                width       : 300,
                type        : 'tree',
                locked      : true,
                touchConfig : { editor : false },
                readOnly: true, filterable: false,
            },
            { id: 2, field: 'tag', text: 'Tag' },
            //more columns...
        ],
    };
};

[mats]

Sounds strange, but hopefully we'll be able to track it down. Any chance you can upload a fully runnable sample that we can debug locally?

[Animal]

How many top level parent nodes are in there?

So if you take out lazyLoad from that configuration, and the tree loads successfully, how many top level nodes do you see?

[thomas]

Thank you for the fast reply. I will try to create a reproducible local demo.
Without lazyLoad my experiment easily shows 2000 top level nodes (and a total of 50,000 data entries). Since we are planning to visualize an internal database with a 1,000,000 entries (I expect less than 4,000 root nodes) I am investigating in lazy load.

[thomas]

I was able to create a simple demo to reproduce the error.
You can clone it from github:
https://github.com/ekert-it/bryntumgrid

How to install the "clean" version (without lazyLoad):

git clone https://github.com/ekert-it/bryntumgrid.git

npm login --auth-type=legacy --registry=https://npm.bryntum.com

cd bryntumgrid/

npm install

npm run dev

If you uncomment lazyLoad: true, in file

src/config/ViewDataConfigAirport.js

const store = new AjaxStore({
    modelClass : Gate,
    readUrl    : '/data/airport.json',
    autoLoad   : true,
    tree       : true,
    lazyLoad: true,
});

the hang becomes visible. Thank you for looking into this.

[Animal]

OK, I reproduced this simply by setting lazyLoad : true in the tree example.

This should work for lazy loading top level nodes.

Be aware though that all descendant children will of course be downloaded. Even if only the first 100 top level nodes are loaded, if they have many children, and those children have many children, the data block which encapsulates that chunk will still be very large.

In this scenario it's better to load the children dynamically from the backend. The children property should be send as true, and then when the user expands the node, the children will be loaded from the network at that point.

[Animal]

Thanks for the details. We hope to get this ticket fixed in the next release: https://github.com/bryntum/support/issues/9797

[thomas]

This sounds good. Thank you.
As a workaround: Could I instantiate the store with autoLoad : false (or even additionally with lazyLoad: false) and then change lazyLoad to true and trigger load() programmatically when the plugin is initialized?

[Animal]

Probably with autoLoad: false, then kick it off at the start of the app will work around it. It’s when autoLoad kicks in early that the bug happens.

[thomas]

Thank you very much for the fast support and the recent 6.0.5 update! bryntum grid meets all our requirements and works like a charm.