Our blazing fast Grid component built with pure JavaScript


Post by rebkova »

Hi,
I'm getting an error about id collision when the store filter is applied and I try to add the data to the store.

The id collision error happens only if the parent nodes are filtered away.

Filters are cleared after every filtering.

I could not see any repeating ids in my dataset when checking the reponse.

Could this be a bug in a treeGrid?


Post by alex.l »

I tried it with https://bryntum.com/examples/grid/tree/ and cannot reproduce that.
What version do you use? It has been fixed in 3.0.3 https://github.com/bryntum/support/issues/211

Could you please try to reproduce it with our examples and provide steps to reproduce?

All the best,
Alex


Post by rebkova »

Hej Alex,

we use 4.3.0 at the moment so the bugg fix should be in place.

What seems to solve the issue was adding argument 'true' to store.removeAll() method _> store.removeAll(true).

Perhaps an issue for another topic but I don't really understand what this does.

I've read in the docs that 'true' suppresses the events. What events is that referring to? removeAll() event stated further down on the same docs page? https://bryntum.com/docs/grid/api/Core/data/mixin/StoreCRUD#function-removeAll

If so, what does the removeAll() event do?


Post by alex.l »

we use 4.3.0 at the moment so the bugg fix should be in place.

Could you try to reproduce it in latest version? Try to apply your configs and data to our tree example and check if the problem is persists. We should be able to reproduce the problem in latest version to open a ticket and fix the problem.

I've read in the docs that 'true' suppresses the events. What events is that referring to?

As example, it throws
https://bryntum.com/docs/grid/api/Core/data/mixin/StoreCRUD#event-remove
https://bryntum.com/docs/grid/api/Core/data/mixin/StoreCRUD#event-beforeRemove
https://bryntum.com/docs/grid/api/Core/data/mixin/StoreCRUD#event-removeAll

In case you do silent remove, it may be the cause of not updated UI in some scenarios, or if that grid/store is used somewhere else, it won't be notified about this operation (because events not triggered). It's hard to predict what exactly may happen, depends on app.

All the best,
Alex


Post by andrew.perera »

Hi Alex,

We use the Scheduler 5.0.0 and encountered the same Id collision error.

We use "Drag drop between multiple schedulers" (https://www.bryntum.com/examples/scheduler/drag-between-schedulers/)
like implementation and the bottom grid has a treeview.

Step 1:
Filter the treeview for a resource E.g "Teamp"
Step 2:
Drag and drop an event from the top grid to the bottom grid.

Picture1.png
Picture1.png (4.73 KiB) Viewed 713 times
ID of the very first item
ID of the very first item
Picture2.png (29.7 KiB) Viewed 713 times

However, when there is no filter it works correctly. The id collision is for the very first tree item regardless of what resource you are dealing with.


Post by alex.l »

Hi andrew.perera,

I tried to reproduce the bug you described, But I don't see any problems.

Please use the code below in any of our scheduler examples (just replace all app.js code with the one I posted) and try to reproduce the problem.

import '../_shared/shared.js'; // not required, our example styling etc.

import WidgetHelper from '../../lib/Core/helper/WidgetHelper.js';
import Splitter from '../../lib/Core/widget/Splitter.js';
import '../../lib/Grid/feature/Stripe.js';

import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import '../../lib/Scheduler/column/ResourceInfoColumn.js';
import '../../lib/Grid/feature/FilterBar.js';
import '../../lib/Grid/feature/Tree.js';
import '../../lib/Scheduler/feature/EventDragSelect.js';

//region Data

WidgetHelper.append([
    {
        type     : 'button',
        ref      : 'zoomInButton',
        cls      : 'b-tool',
        icon     : 'b-icon-search-plus',
        tooltip  : 'Zoom in',
        onAction : () => scheduler1.zoomIn()
    },
    {
        type     : 'button',
        ref      : 'zoomOutButton',
        cls      : 'b-tool',
        icon     : 'b-icon-search-minus',
        tooltip  : 'Zoom out',
        onAction : () => scheduler1.zoomOut()
    }
], { insertFirst : document.getElementById('tools') || document.body });

const
    resources = [
        { id : 1, name : 'Arcady', role : 'Core developer', eventColor : 'purple' },
        { id : 2, name : 'Dave', role : 'Tech Sales', eventColor : 'indigo' },
        { id : 3, name : 'Henrik', role : 'Sales', eventColor : 'blue' },
        { id : 4, name : 'Linda', role : 'Core developer', eventColor : 'cyan' },
        { id : 5, name : 'Maxim', role : 'Developer & UX', eventColor : 'green' },
        { id : 6, name : 'Mike', role : 'CEO', eventColor : 'lime' },
        { id : 7, name : 'Lee', role : 'CTO', eventColor : 'orange' }
    ],
    events    = [
        {
            id           : 1,
            resourceId   : 1,
            name         : 'First Task',
            startDate    : new Date(2018, 0, 1, 10),
            duration     : 2,
            durationUnit : 'h'
        },
        {
            id           : 2,
            resourceId   : 2,
            name         : 'Second Task',
            startDate    : new Date(2018, 0, 1, 12),
            duration     : 2,
            durationUnit : 'h'
        },
        {
            id           : 3,
            resourceId   : 3,
            name         : 'Third Task',
            startDate    : new Date(2018, 0, 1, 14),
            duration     : 2,
            durationUnit : 'h'
        },
        {
            id           : 4,
            resourceId   : 4,
            name         : 'Fourth Task',
            startDate    : new Date(2018, 0, 1, 8),
            duration     : 2,
            durationUnit : 'h'
        },
        {
            id           : 5,
            resourceId   : 5,
            name         : 'Fifth Task',
            startDate    : new Date(2018, 0, 1, 15),
            duration     : 2,
            durationUnit : 'h'
        },
        {
            id           : 6,
            resourceId   : 6,
            name         : 'Sixth Task',
            startDate    : new Date(2018, 0, 1, 16),
            duration     : 2,
            durationUnit : 'h'
        }
    ];

//endregion

const scheduler1 = new Scheduler({
    ref               : 'top-scheduler',
    appendTo          : 'container',
    flex              : '1 1 50%',
    multiEventSelect  : true,
    resourceImagePath : '../_shared/images/users/',

features : {
    stripe    : true,

    sort      : 'name',
    eventDrag : {
        // Allow drag outside of this Scheduler
        constrainDragToTimeline : false
    },
    eventDragCreate : false,
    eventDragSelect : true
},

columns : [
    {
        type  : 'resourceInfo',
        text  : 'New York office',
        width : '15em'
    }
],

resources,

events,

startDate  : new Date(2018, 0, 1, 6),
endDate    : new Date(2018, 0, 2, 20),
viewPreset : 'hourAndDay'
});

new Splitter({
    appendTo : 'container'
});

const scheduler2 = new Scheduler({
    ref               : 'bottom-scheduler',
    appendTo          : 'container',
    flex              : '1 1 50%',
    partner           : scheduler1,
    resourceImagePath : '../_shared/images/users/',
    // hideHeaders : true,
    features          : {
        stripe    : true,
        tree      : true,
        filterBar : true,
        sort      : 'name',
        eventDrag : {
            // Allow drag outside of this Scheduler
            constrainDragToTimeline : false
        },
        eventDragCreate : false,
        eventDragSelect : true
    },

columns : [
    {
        type  : 'tree',
        field : 'name',
        text  : 'Stockholm office',
        width : '15em'
    }
],

resources : [
        {
            "id"       : 1,
            "name"     : "Kastrup Airport",
            "iconCls"  : "b-fa b-fa-plane",
            "expanded" : true,
            "children" : [
                {
                    "id"       : 2,
                    "name"     : "Terminal A",
                    "iconCls"  : "b-fa b-fa-building",
                    "expanded" : true,
                    "children" : [
                        {
                            "id"       : 3,
                            "name"     : "Gates 1 - 5",
                            "iconCls"  : "b-icon b-icon-circle",
                            "expanded" : true,
                            "children" : [
                                {
                                    "id"       : 4,
                                    "name"     : "Gate 1",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 100
                                },
                                {
                                    "id"       : 5,
                                    "name"     : "Gate 2",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 45
                                },
                                {
                                    "id"       : 6,
                                    "name"     : "Gate 3",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 45
                                },
                                {
                                    "id"       : 7,
                                    "name"     : "Gate 4",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 65
                                },
                                {
                                    "id"       : 8,
                                    "name"     : "Gate 5",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 75
                                }
                            ]
                        },
                        {
                            "id"       : 9,
                            "name"     : "Gates 6 - 10",
                            "iconCls"  : "b-icon b-icon-circle",
                            "expanded" : true,
                            "children" : [
                                {
                                    "id"       : 10,
                                    "name"     : "Gate 6",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 77
                                },
                                {
                                    "id"       : 11,
                                    "name"     : "Gate 7",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 85
                                },
                                {
                                    "id"       : 12,
                                    "name"     : "Gate 8",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 95
                                },
                                {
                                    "id"       : 13,
                                    "name"     : "Gate 9",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 55
                                },
                                {
                                    "id"       : 14,
                                    "name"     : "Gate 10",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 15
                                }
                            ]
                        }
                    ]
                },
                {
                    "id"       : 15,
                    "name"     : "Terminal B",
                    "iconCls"  : "b-fa b-fa-building",
                    "children" : [
                        {
                            "id"       : 16,
                            "name"     : "Gates 1 - 5",
                            "iconCls"  : "b-icon b-icon-circle",
                            "children" : [
                                {
                                    "id"       : 17,
                                    "name"     : "Gate 1",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 15
                                },
                                {
                                    "id"       : 18,
                                    "name"     : "Gate 2",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 45
                                },
                                {
                                    "id"       : 19,
                                    "name"     : "Gate 3",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 45
                                },
                                {
                                    "id"       : 20,
                                    "name"     : "Gate 4",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 65
                                },
                                {
                                    "id"       : 21,
                                    "name"     : "Gate 5",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 70
                                }
                            ]
                        },
                        {
                            "id"       : 22,
                            "name"     : "Gates 6 - 10",
                            "iconCls"  : "b-icon b-icon-circle",
                            "children" : [
                                {
                                    "id"       : 23,
                                    "name"     : "Gate 6",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 80
                                },
                                {
                                    "id"       : 24,
                                    "name"     : "Gate 7",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 120
                                },
                                {
                                    "id"       : 25,
                                    "name"     : "Gate 8",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 125
                                },
                                {
                                    "id"       : 26,
                                    "name"     : "Gate 9",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 100
                                },
                                {
                                    "id"       : 27,
                                    "name"     : "Gate 10",
                                    "leaf"     : true,
                                    "iconCls"  : "b-icon b-icon-circle",
                                    "capacity" : 100
                                }
                            ]
                        }
                    ]
                }
            ]
        }

],

events : [
    {
        id           : 11,
        resourceId   : 11,
        name         : 'Implement Feature X',
        startDate    : new Date(2018, 0, 1, 10),
        duration     : 2,
        durationUnit : 'h'
    },
    {
        id           : 12,
        resourceId   : 12,
        name         : 'Refactoring',
        startDate    : new Date(2018, 0, 1, 12),
        duration     : 2,
        durationUnit : 'h'
    },
    {
        id           : 13,
        resourceId   : 16,
        name         : 'Write application tests',
        startDate    : new Date(2018, 0, 1, 14),
        duration     : 2,
        durationUnit : 'h'
    }
]
});

All the best,
Alex


Post by andrew.perera »

Hi Alex, looks like the only solution that worked was store.removeAll(true). Anytime when the resources are filtered in a tree and try to insert the tree with newly updated data this occurs. Anyways thank you for the sample program. I used that to see what exactly happens in the tree.


Post by alex.l »

Hi andrew.perera,

Great to hear you fixed it. But we were not able to reproduce the problem to file the ticket. If you have time to create a test case and steps to reproduce, we will be very appreciated.

All the best,
Alex


Post Reply