1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. javascript syncfusion scheduler addEvent & deleteEvent is not working when using CustomDataAdaptor

javascript syncfusion scheduler addEvent & deleteEvent is not working when using CustomDataAdaptor

We have syncfusion scheduler with javascript. We are using CustomDataAdapter where we call ajax and bind the control. Now our new requirement is to add some dummy events on scheduler but scheduleObj.addEvent or deleteEvent never calls CustomAdaptor's addRecord or deleteRecord.

Please find attached sample to keep it simple we have removed ajax and used static object for data within adaptor.



Attachment: DemoScheduler_55b2525f.zip

5 Replies
SR Swathi Ravi Syncfusion Team September 11, 2024 10:59 AM UTC

Hi Grishma,

Thank you for reaching out to us regarding your issue with the deleteEvent and addEvent functionality. We understand how important it is for your application to handle events smoothly.

To resolve the issue you're facing, we recommend leveraging the batch action for CRUD operations. This approach allows you to effectively manage all CRUD operations in one go, ensuring a seamless experience.

Here’s a brief overview of how to implement the batch operations using the CustomDataAdaptor:

const customDataAdaptor = new ej.data.CustomDataAdaptor({
            getData: function (options) {
                // Simulate a successful fetch of event data
                options.onSuccess(eventData);
            },
            batchUpdate: function (options) {
                let data = JSON.parse(options.data);
                if(data.added.length > 0){ //add event
                    data.added.forEach((record) => {
                        const newEvent = { ...record, Id: eventData.length + 1 }; // Assign a new ID
                        eventData.push(newEvent); // Add to the dummy data array
                        options.onSuccess(newEvent);
                    });
                }
                if(data.changed.length > 0){ // change event
                    data.changed.forEach((record) => {
                        const index = eventData.findIndex(event => event.Id === record.Id);
                        if (index !== -1) {
                            eventData[index] = record; // Update the event
                            options.onSuccess(record);
                        } else {
                            options.onFailure('Event not found');
                        }
                    });
                }
                if(data.deleted.length > 0){ // delete event
                    data.deleted.forEach((record) => {
                        const index = eventData.findIndex(event => event.Id === record.Id);
                        if (index !== -1) {
                            eventData.splice(index, 1); // Remove the event from the array
                            options.onSuccess(eventData);
                        } else {
                            options.onFailure('Event not found');
                        }
                    });
                }
            },
        });

        // Add Event for Nancy
        document.getElementById('addEventBtn').onclick = function () {
            const newEvent = {
                Id: eventData.length + 1, // New ID
                Subject: 'New Event for Nancy',
                StartTime: new Date(2023, 8, 14), // Start time (all day)
                EndTime: new Date(2023, 8, 15), // End time (next day)
                IsAllDay: true,
                ResourceId: [1] // Assign to Nancy
            };
            scheduleObj.addEvent(newEvent); // Add event to the Scheduler
        };

        // Delete Event for Nancy
        document.getElementById('deleteEventBtn').onclick = function () {
            const eventToDelete = eventData.find(event => event.Subject === 'New Event for Nancy' && event.ResourceId.includes(1));
            if (eventToDelete) {
                scheduleObj.deleteEvent(eventToDelete, 'Delete'); // Delete event from the Scheduler
            } else {
                alert('No event found for Nancy to delete.');
            }
        };



Please take a moment to implement these suggestions. If the issue persists or you require further assistance, don't hesitate to reach out. We are committed to ensuring that everything works smoothly for you.

Regards,
Swathi

Attachment: DemoScheduler_4c4afa11.zip

GR grishma September 11, 2024 11:19 AM UTC

Hi Swathi

Thank you so much for responding. It was quite a blocker for us.

Batch update is being called now fine. Although we couldn't find it in any documentation.

And we have 2 more questions:

1>When does addRecord and deleteRecord of Adaptor gets called? only if we use array based datasource?

2>Right now, we are adding dummy events for some kind of preview, so on bacthUpdate how do we add them if we are not using array based datasource but custom api. How do we update data for scheduler from batchUpdate? and remove also?

Thanks
Grishma


SR Swathi Ravi Syncfusion Team September 12, 2024 12:59 PM UTC

Grishma,

I’m glad to hear that the batch update functionality is working for you now. I appreciate your questions, and I'm here to help clarify the functionality of the addRecord, deleteRecord, and updateRecord methods, as well as the batch update process.

1: When do addRecord and deleteRecord of Adaptor get called? only if we use array based datasource?

  • The addRecord method is triggered when you modify events as an object from the array within the actionBegin event.
  • The deleteRecord method is called when you do not specify the currentAction as a second parameter in the deleteEvent method.
  • The updateRecord method is invoked when you do not specify the currentAction as a second parameter in the saveEvent method.

2: Right now, we are adding dummy events for some kind of preview, so on bacthUpdate how do we add them if we are not using array based datasource but custom Api. How do we update data for scheduler from batchUpdate? and remove also?

You can perform a batch update by making an API request that sends the JSON data received in the batch parameter. This allows you to customize the backend processing accordingly. Here’s an example of how you can implement this:

batchUpdate: function (options) {
  let optionsData = JSON.parse(options.data);
  createRequest(baseUrl + 'your-method-name', optionsData);  
 }

For more information on how to call the API request during a batch update, please refer to the documentation on performing CRUD actions with a Custom DataAdaptor and handling batch actions in the backend.
If you have any further questions or need additional assistance, please feel free to reach out. We’re here to help!

GR grishma September 16, 2024 08:46 AM UTC

@Swathi


On batch update, we don't need to send anything to server. But when we call onSuccess from batch on add/delete event it is triggering "getData" method of adapter which we don't want. Hence we have put flag in bacthUpdate as true and within getData if that flag is truewe do not call ajax . But this is not a clean solution so if there is any better solution please let us know.


SR Swathi Ravi Syncfusion Team September 17, 2024 06:32 AM UTC

Grishma,

Thank you for providing the details of your concern.
In the Scheduler, when performing CRUD operations such as add, update, or delete, the component automatically fetches the latest data from the backend to ensure the data remains in sync. This is why the getData method is triggered after each operation. Currently, there is no built-in option to prevent this behavior, as it is designed to keep the Scheduler up to date with the latest changes.

If you have any further questions or need additional assistance, feel free to let us know. We're here to help!

Loader.
Up arrow icon