Rendering issues with large rows

[lucaas]

We experience a bunch of different rendering issues with the buffered rendering when working with a lot of events in the Scheduler. Some of the issues I see include:

• Event dissapears after being dropped
• Rows are empty, though there are scheduled events there
• Multiple rows are rendered on top of each other.
• Scrolling behaves badly, for example jumping up when scrolling to bottom.

Screen Shot 2019-10-14 at 09.54.55.png (31.52 KiB) Viewed 690 times

Screen Shot 2019-10-14 at 09.42.02.png (9.04 KiB) Viewed 690 times

I can reproruce this in the https://www.bryntum.com/examples/scheduler/multiassign/ demo using the following code. After which I drag around a few events and scroll up and down a bit.

var scheduler = bryntum.query('scheduler');
scheduler.resourceStore.removeAll();

var resources = Array(50).fill(null).map((item, index) => ({
    id: `test-resource-${index}`,
    name: `Test ${index}`,
}));
scheduler.resourceStore.add(resources);

var events = [];
var assignments = [];
for (var i = 1; i < 10; i++) {
    for (var j = 1; j < 50; j++) {
        events.push({
            id         : `test-event-${i}-${j}`,
            startDate  : new Date(2017, 0, 1, 13),
            endDate    : new Date(2017, 0, 1, 20),
            name       : `Event ${i}-${j}`,
        })
        assignments.push({
            eventId: `test-event-${i}-${j}`,
            resourceId: `test-resource-${i}`,
        });
    }
}
scheduler.eventStore.add(events);
scheduler.assignmentStore.add(assignments);

setTimeout(() => {
    scheduler.scrollToBottom();
}, 1000);

/ Lucas

[mats]

Thanks for the report, ticket opened here: https://app.assembla.com/spaces/bryntum/tickets/9375-rendering-broken-after-adding-many-resources-events-and-scrolling-to-bottom/details#