Canceling actionBegin with aync paramater

[CodeAlgo]

I'm currently working on a project using the schedule component, and I can't seem to work out why the "actionBegin" function built into the component doesn't work properly when dealing with an async callback and also why events are added if "args.cancel" is triggered by an await parameter

This is the issue:

actionBegin={ async (args: ActionEventArgs) => { const { requestType, changedRecords, addedRecords, deletedRecords } = args let performAction: any = false let isOnLine = navigator.onLine if (requestType === "eventCreate") { if (addedRecords?.length) performAction = await addSchedule(addedRecords) } else if (requestType === "eventChange") { if (addedRecords?.length) performAction = await addSchedule(addedRecords) if (changedRecords?.length) performAction = await changeSchedule(changedRecords) if (deletedRecords?.length) performAction = await popSchedule(deletedRecords) } else if (requestType === "eventRemove") { if (deletedRecords?.length) performAction = await popSchedule(deletedRecords) } console.log(performAction === false && (requestType === "eventChange" || requestType === "eventRemove" || requestType === "eventCreate") && isOnLine === false) console.log(`isOnLine-${isOnLine}`) console.log(`performAction-${performAction}`) if (performAction === false && (requestType === "eventChange" || requestType === "eventRemove" || requestType === "eventCreate") && isOnLine === false) args.cancel = true } }

[Ravikumar Venkatesan]

Hi CodeAlgo,

We suspect that the added, updated, or deleted data was updated with the Schedule dataSource property. So, we suggest you make sure the data added, updated, or deleted on the actionBegin event is not updated with the Schedule dataSource. In the below example, we have prevented adding the appointment by setting args.cancel to true and preventing merging the added data to the Schedule dataSource. If you are still having issues, please share the below details to proceed further.

• Reproduce the issue in our shared sample,
• Issue reproducing sample.

Sample: https://stackblitz.com/edit/ej2-react-ts-schedule-prevent-adding-actionbegin-event?file=App.tsx

[index.js]

export const App = () => {

  let scheduleObj;

  const [data, setData] = useState([]);

 

  async function addSchedule(addedData) {

    // Don't update the variable bind to the Schedule eventSettings dataSource property

    // setData(data.concat(addedData));

  }

 

  return (

    <ScheduleComponent  eventSettings={{ dataSource: data }} actionBegin={async (args) => { if (args.requestType === 'eventCreate') { addSchedule(args.addedRecords) } args.cancel = args.requestType === 'eventCreate'; }}>

    </ScheduleComponent>

  );

}

Regards,

Ravikumar Venkatesan