Our pure JavaScript Scheduler component


Post by dpontes »

Hello!

I am having issues with the scroll feature when trying to scroll into children events of a nested events structure.

In our project our data structure is very similar to the one used in this docs live example: https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/feature/NestedEvents

I have modified that live example to include a button which will get one of the available and visible child events, and perform the scroll on it. (modified example in the bottom of this post)

When trying the scroll, nothing happens and this console is returned: "rootcause-full.js:10 You have asked to scroll to an event which is not available".

From some debugging I believe the issue is caused because children events are not inserted into the eventStore storage.

The scrollEventIntoView will only perform the action if "isAvailable" function return true, and in this case it will always return false for children events as it will try to check the existence of the record in the storage.

I would like to understand if this is possibly a bug, or if this is the intended behavior what I need to do to make the scrolling work with the children events as I don't think they should be considered "unavailable".

Thank you! :)

const schedulerPro = new SchedulerPro({
    appendTo : targetElement,

// makes scheduler as high as it needs to be to fit rows
autoHeight : true,

features : {
    nestedEvents : true,
    timeAxisHeaderMenu: {
        items : {
            frozenWindow: {
               text: "Scroll to",
               onItem() {
                   event = schedulerPro.eventStore.getById(11);
                   schedulerPro.scrollEventIntoView(event);
               }
           }
       }
}

},

rowHeight : 160,
startDate : new Date(2022, 2, 20),
endDate   : new Date(2022, 2, 27),

columns : [
    { field : 'name', text : 'Name', width : 100 }
],

project : {
    resourcesData : [
        { id : 1, name : 'Bruce' },
        { id : 2, name : 'Diana' }
    ],

    eventsData : [
        {
            id        : 1,
            name      : 'Art project',
            startDate : '2022-03-21',
            duration  : 5,
            children  : [
                { id : 11, name : 'Get supplies', startDate : '2022-03-21', duration : 2 },
                { id : 12, name : 'Sketch', startDate : '2022-03-22', duration : 1, eventColor : 'indigo'  },
                { id : 13, name : 'Outline', startDate : '2022-03-22', duration : 2, eventColor : 'blue'  },
                { id : 14, name : 'Ink', startDate : '2022-03-23', duration : 2, eventColor : 'violet'  },
                { id : 15, name : 'Share', startDate : '2022-03-24', duration : 2, eventColor : 'pink'  }
            ]
        },
        {
            id        : 2,
            name      : 'DIY project',
            startDate : '2022-03-24',
            duration  : 5,
            children  : [
                { id : 21, name : 'Plan', startDate : '2022-03-21', duration : 1, eventColor : 'indigo' },
                { id : 22, name : 'Get supplies', startDate : '2022-03-22', duration : 2  },
                { id : 23, name : 'Prototype', startDate : '2022-03-22', duration : 3, eventColor : 'violet'  },
                { id : 24, name : 'Make', startDate : '2022-03-24', duration : 1, eventColor : 'blue'  }
            ]
        }
    ],

    assignmentsData : [
        { id : 1, event : 1, resource : 1 },
        { id : 2, event : 11, resource : 1 },
        { id : 3, event : 12, resource : 1 },
        { id : 4, event : 13, resource : 1 },
        { id : 5, event : 14, resource : 1 },
        { id : 6, event : 15, resource : 1 },
        { id : 7, event : 2, resource : 2 },
        { id : 8, event : 21, resource : 2 },
        { id : 9, event : 22, resource : 2 },
        { id : 10, event : 23, resource : 2 },
        { id : 11, event : 24, resource : 2 }
    ]
},

tbar : [
    {
        type        : 'buttongroup',
        toggleGroup : true,
        items       : {
            none  : { text : 'Overlap' },
            stack : { text : 'Stack' },
            pack  : { text : 'Pack', pressed : true }
        },
        onToggle({ source, pressed }) {
            if (pressed) {
                schedulerPro.features.nestedEvents.eventLayout = source.ref;
            }
        }
    }
]

});

Post by mats »

Sounds like a bug yes, we'll check it! https://github.com/bryntum/support/issues/6114


Post Reply