Our pure JavaScript Scheduler component


Post by thorthor »

Steps for installation:

1. clone repository https://github.com/renatoruk/bryntum-scheduler-react-test
2. checkout branch scroll-to-event from origin/scroll-to-event
3. create vendor folder in the root directory
4. paste scheduler-vanilla-2.1.3 zip in the vendor directory
5. extract scheduler to that folder and rename to scheduler
6. run npm install in the project's root directory
7. run "npm run start" after installation

Steps for reproduction A:
1. press update events button

BryntumScheduler.tsx component internally has this block
if (this.props.scrollToEvent !== undefined) {
                // @ts-ignore
                this.schedulerEngine.scrollEventIntoView(this.props.scrollToEvent, {
                    animate: 1000,
                    highlight: true,
                }).then(() => {
                    // @ts-ignore
                    console.log(`scrolled ${this.props.scrollToEvent.name} into view`);
                });
                // @ts-ignore
                this.schedulerEngine.selectEvent(this.props.scrollToEvent);
        }
The promise resolves but scheduler does not scroll. I tried wrapping the call inside setTimeout to check if maybe there's a clash between rendering and scrolling, but there was no difference.


Steps for reproduction B:
1. select an event in select box on top or press update events

In the scrolling example everything works, but when I wrap that into react with extended models and resources, it does not.

I tried refreshing the grid manually with refreshWithTransition, but it did not help. Currently, I am out of options as I tried searching the forum for this and browsed through your public support tickets to page 4.

Do you have an idea what could be the fix?

Cheers,
Renato

Post by pmiklashevich »

Hello Renato,

I see in updateEvents handler you generate a new dataset and then replace data in resource store and event store. If you set a breakpoint in BryntumScheduler.componentDidUpdate, you'll see
        if (this.props.resources !== prevProps.resources) {
            this.schedulerEngine.resourceStore.data = resources;
        }

        if (this.props.events !== prevProps.events) {
            this.schedulerEngine.eventStore.removeAll(false);
            this.schedulerEngine.eventStore.data = events;
        }

        if (this.props.scrollToEvent !== undefined) {
            debugger
                // @ts-ignore
                this.schedulerEngine.scrollEventIntoView(this.props.scrollToEvent, {
that this.props.scrollToEvent.eventStore is undefined. Which means it's not a part of the store any more. this.props.scrollToEvent.resources is an empty array. So it's not possible to resolve where to scroll and the promise is resolved immediately. If you try to scroll to the last event in the store, you'll see the function works:
this.schedulerEngine.scrollEventIntoView(this.schedulerEngine.eventStore.last, {
    animate: 1000,
    highlight: true,
}).then(() => {
    // @ts-ignore
    console.log(`scrolled ${this.props.scrollToEvent.name} into view`);
});
Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by thorthor »

Hello Pavel,

thank you for taking the time to look into it. Indeed, the bug was in my code. I was filtering the events by a certain criteria and passed the event for scrolling into that was no longer a part of that particular event store on the scheduler.

It was a bit tricky to debug as I did not know that the eventStore was detached from eventModel and that it's a required condition.

You could maybe print a warning message that eventStore is undefined or reject a promise for that specific case? I would actually want it to fail if really the scroller does not have anywhere to scroll. What do you think?

Cheers,
Renato

Post by pmiklashevich »

Hello Renato,

We will add a warning. Thanks for your feedback!
https://app.assembla.com/spaces/bryntum/tickets/9098-warn-users-if-scrolleventintoview-is-not-possible/details

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by thorthor »

Cool, looking forward to the addition!

Best,
Renato

Post Reply