Loading data into the scheduler

[Amos]

Hi

I have the following code

                        this.eventsData.splice(0, this.eventsData.length);

                        var index = 1;

                        for (var item in response.data.result) {

                            for (var subitem in response.data.result[item]) {

                                this.eventsData.push({

                                    Id: index,

                                    Subject: subitem,

                                    isAllDay: true,

                                    StartTime: this.dateFromEpochDays(item),

                                    EndTime: this.dateFromEpochDays(item),

                                    isReadonly: true,   

                                });

                                index++;

                            }

                        }

                        let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

                        scheduleObj.eventSettings.dataSource = this.eventsData;

            eventsData: [],

            eventSettings: {

                dataSource: this.eventsData,

            },

The above works but for some reason I have to reassign the source object to the datasource in a weird way for it to work.

Isn't assigning it the first time enough?

I fought with this for a long time and I didn't understand why it doesn't work without the reassignment until I read another post

in this forum with this "solution".

Thanks

[Vengatesh Maniraj]

Hi Amos, 

Greetings from Syncfusion Support. 

We have validated your query Loading data into the scheduler and we suspect that you have to re-assign the events data at some of the action. If you want to handle the dynamic datasource, you have to re-assign the data source where do you want. 

If we misunderstood your requirement, kindly share the below details to serve you better. 

• Clear detail about your requirement like video demo
• Share scheduler illustrating codes

Regards, 

Vengatesh 

[Amos]

When loading the screen, I call a server API to fetch the scheduler data, process it and then I assign it to the scheduler's datasoutce -> this.eventsData

eventSettings: {

                dataSource: this.eventsData,

},

You consider it dynamic?

and if so, can the assignment use $refs instead of the below?
let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

scheduleObj.eventSettings.dataSource = this.eventsData;

meaning for example just this.$refs.schedObj.eventSettings.dataSource = this.eventsData;

Thanks

[Vengatesh Maniraj]

Hi Amos, 

Thanks for the update. 

The initial assignment is not consider as dynamic update.  

eventSettings: {                  dataSource: this.eventsData,  },	Initial assignment
let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];  scheduleObj.eventSettings.dataSource = this.eventsData;	Dynamic assignment

 

We can assign the datasource like the below code instead of using the above dynamic assignment. 

 

this.$refs.ScheduleObj.ej2Instances.eventSettings.dataSource = []; 

 

For more reference please check the below sample. 

 

Sample: https://codesandbox.io/s/vue-template-z33r0?file=/src/App.vue:3333-3400 

Regards, 

Vengatesh  

[Amos]

ok, thank you

[Vengatesh Maniraj]

Hi Amos, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh