how to know when all events has successfully bound to eventSettings's dataSource

[Azfar]

Hi,

Per the title, is there a listener that I can listen to when the schedule's eventSettings dataSource has been successfully bounded to the schedule.

In  my case, I cannot get a single event when I called getEvent() method directly after setting the dataSource. But when I called the getEvent() in the console when everything has finished rendering, I got an array of events.

schedule.eventSettings.dataSource = generateExceptionCalendarEvent( aux );

schedule.getEvent();

[Vijay Ravi]

Hi Azfar,
 

To determine when all events have been successfully bound to the eventSettings.dataSource in the Schedule, you should utilize the dataBound event. This event is triggered once the data source has been successfully bound. Within this event, you can call the getEvents() method on the Schedule instance to retrieve all the events.

getEvents api: https://ej2.syncfusion.com/javascript/documentation/api/schedule/#getevents

dataBound api: https://ej2.syncfusion.com/javascript/documentation/api/schedule/#databound
 

schedule.eventSettings.dataSource = generateExceptionCalendarEvent(aux);

 

// Listen for the dataBound event
 

schedule.dataBound = function() {

    const events = schedule.getEvents();

};

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Azfar]

Hi Vijay thanks for the answer.

I tried and it seems the flow of the event called is:

dataBinding ---------> eventRendered ---------> dataBound

I can already get the events by calling getEvents during dataBinding. I tried to manipulate the data during this event, but it seems that the changes is ignored. The data will reset to the original data that I set in the dataSource, and the event rendered will be based on the original data.

Is it supposed to be this way? Because I wanted to edit the data before it is being rendered.

[Saritha Sankar]

Hi Afzar,

As per your requirement, you can edit the event data just before it gets rendered in the Schedule component by using the databound event. Refer the below code and sample for your reference.

 

schedule.dataBound = function() {

    const events = schedule.getEvents();

    const modifiedData = data.map(event => {

        if (event.Id === 1) {

            event.Subject = "Changed Event";

        }

        return event;

    });

    scheduleObj.eventSettings.dataSource = modifiedData;

};

Sample Link: https://stackblitz.com/edit/ykiuu9yt-yp1jiutt?file=index.ts

Please let us know if you need any further assistance.

Regards,

Saritha S.