Premium support for our pure JavaScript UI components


Post by peterjc »

Hi, I have found after updating the scheduler from v3.1.3 to 5.0.6 that when I update an event property (eg the startDate), that the UI does not update, unless I remove the calls to this.scheduler.eventStore.beginBatch(); and this.scheduler.eventStore.endBatch();. Without these the UI does update.

I have my eventstore instantiated as follows

public schedulerConfig = {
    eventStore: {
      modelClass : SchedulerEventModel,
      data: []
    }    
}; ... <bryntum-scheduler #scheduler [eventStore]="schedulerConfig.eventStore"

To update, I get a refererence to the event store records

this.scheduler.eventStore.beginBatch();
const currentEvents: Array<any> = this.scheduler.eventStore.records;

// update properties, eg startDate

this.scheduler.eventStore.endBatch();

and then I will set properties I want to update on them.

One thing I notice, is if I debug into the startDate setter, I see the following...

2022-06-28_16-31-20.png
2022-06-28_16-31-20.png (22.98 KiB) Viewed 571 times

ie this.batching is undefined. I am not sure if this is significate or not.

At any rate, it certainly did use to update the UI, and if I remove the batch calls it does as well.

Is there something else I have missed?

Thanks in advance


Post by tasnim »

I'm not able to reproduce it.
After begin batch I updated the date and name then I did endBatch and it applies all the changes. I tried to reproduce it here https://bryntum.com/examples/scheduler/basic

Could you please provide a runnable test case?


Post by peterjc »

Hi, I am unable to reproduce it in a simple example either.

Which now leaves me to try and find out why in my application it does not work. It does not happen all the time, infact it fails the first time I set if after I have added the events.

When it fails, here the callstack where we can see the endBatch being called...

stack.jpg
stack.jpg (25.94 KiB) Viewed 547 times

and in here, when we get to it looking at the startDate property, it compares and oldvalue, to a new value. But the oldValue is already set to the new value!??

code1.jpg
code1.jpg (128.9 KiB) Viewed 547 times

And I have no idea why, just in some cases.

This is the first time it has arrive in this method for startDate (I have a breakpoint and watched until startDate came in). So once startDate is not added to wasSet becuse of the above comparison, the event UI is not updated.

Just before I set the startDate property, It was previously 1:00pm..

screenshot.jpg
screenshot.jpg (6.8 KiB) Viewed 547 times

I don't quite understand the code that gets oldValue. Is there any way I can possible find out where the startDate has been previously set? It is impossible to know what is being done differently, so I really need to find pout where startDate is set to the new value before we get into this method (and only when using batch mode)?

Any help greatly appreciated


Post by peterjc »

Finally I can reproduce in a basic example!

I've taken you basic Angular example and modified to demonstrate the problem (attached)

So, what makes this happen is when using s custom class, with a custom property for the events.

In the example, see CustomEventModel, and I have added

static get fields() {
      return [     
'customField',
]; }

I have added a button that invokes updateDate()

screenshot2.png
screenshot2.png (13.48 KiB) Viewed 537 times
 updateDate(): void {
        try {
            const events = this.scheduler.eventStore.records as CustomEventModel[];

        const exampleEvent = events[0];
        let startDate = new Date(exampleEvent.startDate);
        const endTime = exampleEvent.endDate;
        
        // Add a bit
        this.scheduler.eventStore.beginBatch();

        startDate.setTime(startDate.getTime() + 1200000);
        exampleEvent.startDate = startDate;
        exampleEvent.endDate = endTime;

        // ####################################
        // Only fails when we update this
        exampleEvent.customField++;
        // ####################################

        this.scheduler.eventStore.endBatch();

    } catch (error) {
        console.error(error);
    }
}

In here I change this custom field, eg exampleEvent.customField++;, and you will see the task does not update.

If we remove the line exampleEvent.customField++;,, then is does update.

So it is the custom field that is causing the issue (I have a few in my app).

Attachments
basic.7z
(177.45 KiB) Downloaded 50 times

Post by alex.l »

Reproduced, thank you for all the information provided.
I've opened a ticket to fix this https://github.com/bryntum/support/issues/4868

All the best,
Alex


Post by peterjc »

Hi, I can see this one is ready to review.
Will this be included, in a release soon, or even a nightly?

Really would like to re enable the batch mode

Thanks in advance


Post by tasnim »

Yes, It will be fixed soon and going to be available in a patch release. Please subscribe to the ticket so it will notify you when it fixes.

Good Luck :),
Tasnim


Post Reply