cancel event when using a promise for actionBegin

Question

I'm trying to only have the calendar complete the update event if my asynchronous data updates are successful.

eg, I drag an event to a different date, I run async event updates to our api via the actionBegin, if that fails for some reason I want to set args.cance = true so the calendar doesn't continue with the update internally and move the event. But if I wrap the actionBegin function passed to Schedule in a promise it doersn't appear to await before completing the update internally.

something like:

const onActionBegin = async args => {
       try {
           await someAsyncUpdate(args)
       } catch(e) {
          //updated failed
          args.cancel = true
       }
    }

Is this possible, if not how would you handle this scenario?

versions:

    "@syncfusion/ej2-base": "~20.3.49",
    "@syncfusion/ej2-react-base": "~20.3.47",
    "@syncfusion/ej2-schedule": "20.3.49"


Any assistance greatly appreciated

Paul Trappitt · Answer

quick update on this. Not sure why it's happening but it does work inside the promise if you set it before any async commands. const onActionBegin =  async args => {        args.cancel = true         try {            await someAsyncUpdate(args)            //won't work if try and set it here
            args.cancel = true          } catch(e) {            //ignore          }        }}

Venkateshwaran Saravanakumar · Answer

Hi Paul,

By default, ‘args.cancel‘ may not work on asynchronous operations.
Therefore, we recommend refreshing the appointments of the Scheduler with the
updated data obtained from the successful completion of the update action.When performing asynchronous operations, such as making API calls or
database updates, the code may not wait for the operation to complete before
moving on to the next steps. As a result, using ‘args.cancel’ directly
within an asynchronous callback may not have the desired effect.To handle this situation, you can follow these steps:1.Perform the asynchronous update action, such as an API call to update data
in the backend.2.In the success callback or the ‘then’ block of the asynchronous
operation, obtain the updated data.3.Refresh
the appointments of the Scheduler with the updated data to reflect the changes
in the UI.

Regards,
Venkatesh

Paul Trappitt · Answer

Hi Venkatesh,Thanks for the reply. We aren't having any issues with the events updating when things are succesful, what we don't want is for the calendar to complete the action (ie call actionComplete)  if the async is unsuccessful. As in possibly the async function is running some local validation and throws immediately from promise without an api call due to validation error. Currently from a UX perspectivem, the user has moved the event, it visually moves, then is programatically moved back. When you are able to call args.cancel first The ux is that it appears to prevent the user from even dropping it in the first place.I guess we can code around it, but would be nice to see all evnt handles adequately handle promise based handlers. Even some way that the onActionBegin function could by structured to handle async flow properly, maybe being able to throw an exception or return false to cancel rather than updating the args object through a side effect.CheersPaul

Venkateshwaran Saravanakumar · Answer

Paul,

UG: https://ej2.syncfusion.com/react/documentation/schedule/data-binding#scheduler-crud-actions
According to the current Scheduler architecture, event handlers do not support asynchronous
operations. If you need async operations, you can use the URL data adapter
where the requests are passed as async, allowing you to handle your
requirements accordingly. In case of a failure, it is also handled in the ActionFailure
event. Refer to the shared UG for more details.