Our pure JavaScript Scheduler component


[JS-TYPESCRIPT] Refresh Grid data after loading all the data

Post Reply

Post by hlabatf@colas.com »

Hello,

I'm wondering how to refresh data in the grid on the left side. Indeed, when im loading data like this :

public async loadData(plannerGraphId: number) {

if (await this.loadPlanningGraph(plannerGraphId) == null) {

    BootstrapInfoToast.show("Unable to retrieve your planner graph");

    return;

}

if (this.planningGraph != null && this.scheduler != null) {
    
    this.scheduler.readOnly = true;

    this.scheduler.suspendRefresh();

    this.eventStore.suspendEvents();

    this.resourceStore.suspendEvents();

    this.timeRangeStore.suspendEvents();

    this.mask(ResourcesManager.manager.getString("LoadingData"));

    await Promise.all([
        this.loadEvents(),
        this.loadResources(),
        this.loadTimeRanges()
    ]).finally(async () => {

        if (this.scheduler) {

            await this.scheduler.resumeRefresh(false);

            this.eventStore.resumeEvents();

            this.resourceStore.resumeEvents();

            this.timeRangeStore.resumeEvents();

            this.unmask();

            this.scheduler.readOnly = false;

            this.scrollToDate = new Date();
        }
    });

}

}
BrytumInfos.mp4
(2.68 MiB) Downloaded 11 times

as you can see i need to scroll to bottom and back to top to show data.

Do you have a clue?

Best regards,

François

Post by mats »

Try removing these? Should not be needed.

  this.eventStore.suspendEvents();

this.resourceStore.suspendEvents();

this.timeRangeStore.suspendEvents();

Post by hlabatf@colas.com »

Thanks Mats,

Indeed removing suspendEvents display the missing row resource information missing. But now is trying to save all data added. My code is like this. Every x seconds he will check if i need to save something for the three stores:

    public async save(): Promise<boolean> {

    if (!this.isSaving && !this.isEditingEvent && this.eventStore.changes && (
        this.eventStore.changes.added.length > 0
        ||
        this.eventStore.changes.modified.length > 0
        ||
        this.eventStore.changes.removed.length > 0
    )) {

        this.isSaving = true;

        await this.saveEvents();

        this.isSaving = false;

    }
    ....

Post by hlabatf@colas.com »

I have the same issue with timeRanges. There are not display on Gantt. That's was working in version 5.6.7 with the code i have give you. Indeed, i need to zoom in or out to show it (as in the video).

BrytumInfos_2.mp4
(1.87 MiB) Downloaded 20 times

Post by alex.l »

Hi,

To track data change stores have change event, why do you need to check it manually?

I have the same issue with timeRanges. There are not display on Gantt. That's was working in version 5.6.7 with the code i have give you. Indeed, i need to zoom in or out to show it (as in the video).

We need a test case to help with that. I can't know what's wrong without the code, unfortunately.

All the best,
Alex

Post by hlabatf@colas.com »

I don't kown if that's can help you. But when i'm using this code

        if (this.planningGraph != null && this.scheduler != null) {

        this.scheduler.readOnly = true;

        this.scheduler.suspendRefresh();

        this.mask(ResourcesManager.manager.getString("LoadingData"));

        await Promise.all([
            this.loadEvents(),
            this.loadResources(),
            this.loadTimeRanges()
        ]).finally(async () => {
            console.log("All stores are loaded");
            if (this.scheduler) {

                await this.scheduler.resumeRefresh(false);

                this.unmask();

                this.scheduler.readOnly = false;

                this.scrollToDate = new Date();
            }
        });

    }

The hasChange

       this._scheduler.crudManager.on({
           // Called for data changes that are persistable  

           async hasChanges() {
               const { changes } = this as any;
               let t = changes;
               await context.save();
           }
       });

is triggered when fill data with

   await this.eventStore.loadDataAsync(data);

I don't know why. How i can stop listening will filling data?

Post by ghulam.ghous »

Hi there,

We are bit lost here. Can you please explain the use case that you are trying to achieve with hasChanges function? As Alex mentioned, our stores has change event, where you can keep track of the changes and perform corresponding actions. Can't assist you without reproducing this issue? Can you try your config in this example https://bryntum.com/products/schedulerpro/examples-scheduler/timeranges/ and see if it reproducible? If yes please share the update example code. Otherwise you can remove the extra code from project to minimize it to minimum config where we can reproduce this issue and share us here as a zipped file or on our email support@bryntum.com.

Regards,
Ghous

Post Reply