We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customise delete confirmation view on scheduler

Hello ,
on Essential JS2 for Angular . is there a way to customise delete confirmation view on scheduler?
Ideally we would like to have our own content (form elements, inputs, buttons  etc) on this view.
Also we would like to programmatically close the confirm view , after our custom logic executes


10 Replies

NR Nevitha Ravi Syncfusion Team May 20, 2019 10:07 AM UTC

Hi Oliver, 

Greetings from Syncfusion Support. 

We have prepared sample to customize the delete confirmation popup by having an additional dropdown field which can be view from the following link. 

onPopupOpen(args: PopupOpenEventArgs) { 
    if (args.type === 'DeleteAlert') { 
      let content = args.element.querySelector('#QuickDialog_dialog-content'); 
      let dropdown = createElement('div', { className: 'reason-dropdown' }); 
      if (!args.element.querySelector('.reason-dropdown').classList.contains('e-dropdownlist')) { 
        let dropDownListObject: DropDownList = new DropDownList({ 
          width: "100%", 
          placeholder: 'Choose reason', 
          dataSource: ['Duplicate event', 'Unwanted event', 'Others'] 
      } else { 
        (args.element.querySelector('.reason-dropdown') as any).ej2_instances[0].value = null; 

To programmatically close the confirmation popup, use the following code. 



IV Ivan March 20, 2020 08:44 AM UTC


Is there any way to skip your confirmation dialog and have a full customized? 

Eg. on delete not showing dialog and trigger manually action EventRemove and handle confirmation dialog in actionBegin


if (args.requestType === 'eventRemove' && (args.deletedRecords.length > 0 || !(new ej.base.isNullOrUndefined(args.deletedRecords)))) {
_validateDelete(args, args.deletedRecords[0]);


HB Hareesh Balasubramanian Syncfusion Team March 23, 2020 12:08 PM UTC

Hi Ivan, 

Thanks for the update. 

We have validated your reported scenario at our end and for that we have prepared a sample using popupOpen event and the sample can be viewed from the following link, 

Code snippet
  public onPopupOpen(args: any) { 
    if (args.type === 'DeleteAlert') { 
      args.cancel = true; 

Kindly try the above sample and if you have any other concerns please revert for further assistance. 


IV Ivan March 23, 2020 08:05 PM UTC


it works.


VM Vengatesh Maniraj Syncfusion Team March 24, 2020 05:20 AM UTC

Hi Ivan, 

Thanks for the update. 

We are happy that our solution has fulfilled your requirement. 


IV Ivan March 24, 2020 08:02 PM UTC

One more question.

I have custom structure in database for events ( not ical format for recurring events ) and for delete is important for me to send whole record. 

deleteEvent sends only action remove and key ( id of event ).

when is used deletedRecords field?


HB Hareesh Balasubramanian Syncfusion Team March 25, 2020 12:46 PM UTC

Hi Ivan, 

Thanks for the update. 

The field deleteRecords is used to carry the event object from client to server while delete the events. And, the deleteEvent object also support to delete the multiple event at single request. Please refer the below sample.  

public onClick() { 
    let records:any = this.scheduleObj.getCurrentViewEvents(); 

Kindly try the above sample and if you have any other concerns please revert for further assistance. 


IV Ivan March 26, 2020 09:41 AM UTC

I add two times same record in array, and get on server deletedRecords.


HB Hareesh Balasubramanian Syncfusion Team March 27, 2020 12:40 PM UTC

Hi Ivan, 

Thanks for the update. 

We have tried to understand your requirements at our end. But we couldn't. Kindly let us know more details about your use case scenario/Scheduler rendering code snippets/video demo/workable sample(If possible) for the better serve. 


IV Ivan March 28, 2020 04:42 PM UTC


first I wanted to bypass your delete dialog. I have achieved the above with your answer regarding the directly call deleteEvent action.

My events are repetitive, but I did not use your implementation for rendering on component, but instead I calculate dates on the server, thus returning data to the Schedule component.

As I returned the event id here in the past, and when I open Editor it got the start date of the day it was selected, it was important for me to get the whole object on the server, not just the remove action and within the key proper id event.

After that you told me, if I have a deletion with the list of objects, the full event objects are sent to the server. So I added the same event 2 x to the list and made the deleted deletedRecords property come to my server. When fetching, I only take the first one because I do not support multiple deletion.


I have event started on 3rd March and repeats every week until 31 March. 

View period is 23 - 29. march. So Data from server would have one event with date 24. March. But as hidden property it would have 03. March as initial date. 

If I select delete action custom popup will be shown with 3 actions. cancel, delete only this event, delete this and all future event occurrence

if I select to delete only this. result will be two records in database, 03. March. valid to 17.march and second - 31. March
if I select to delete only this and  all future event occurrence. result will be only one record in database, 03. March. valid to 17.march. 

i hope i explained the case well i'm trying to sort it out

Live Chat Icon For mobile
Up arrow icon