Customizing the Delete Confirmation Dialog in KendoReact Scheduler

Environment

Product Version	8.3.0
Product	Progress® KendoReact Scheduler

Description

I want to customize the delete confirmation dialog box in the KendoReact Scheduler.

This KB article also answers the following questions:

• How can I replace the default delete confirmation dialog in the KendoReact Scheduler?
• What are the steps to implement a custom dialog for delete confirmation in KendoReact Scheduler?
• Can I use a custom component for the delete confirmation dialog in the KendoReact Scheduler?

Solution

To customize the delete confirmation dialog in the KendoReact Scheduler, follow these steps:

1. Create your custom dialog component that will be used as the delete confirmation dialog. Ensure your custom dialog component handles the delete confirmation logic according to your requirements.

2. Use the removeDialog property of the SchedulerEditItem component to specify your custom dialog component. This property allows you to replace the default delete confirmation dialog with your custom component.

3. Specify the custom edit item component, which includes your custom dialog, in the editItem prop of the Scheduler component.

jsx

const CustomEditItem = props => {
  return <SchedulerEditItem {...props} removeDialog={MyDialog} />;
};

<Scheduler
  ...
  editItem={CustomEditItem}
  ...
/>

4. Ensure that all necessary props and logic are passed to your custom dialog component for it to function as expected within the Scheduler component.

For a practical example demonstrating these steps, refer to the following demo:

Change Theme

Theme

Loading ...

See Also

• KendoReact Scheduler
• API Reference of the Scheduler