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

Thanks

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. 

https://stackblitz.com/edit/angular-y5kqma-ispc5p?file=app.component.ts  

onPopupOpen(args: PopupOpenEventArgs) { 

    if (args.type === 'DeleteAlert') { 

      let content = args.element.querySelector('#QuickDialog_dialog-content'); 

      let dropdown = createElement('div', { className: 'reason-dropdown' }); 

      content.appendChild(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'] 

        }); 

        dropDownListObject.appendTo(dropdown); 

      } else { 

        (args.element.querySelector('.reason-dropdown') as any).ej2_instances[0].value = null; 

      } 

    } 

  } 

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

Regards, 

Nevitha. 

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

KR,
Ivan

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: 

Sample: https://stackblitz.com/edit/angular-qxmnbw?file=app.component.ts 

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

Regards, 

Hareesh 

Hi Ivan, 

Thanks for the update. 

We are happy that our solution has fulfilled your requirement. 

Regards, 

Vengatesh 

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?

KR,
Ivan 

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(); 

    this.scheduleObj.deleteEvent(records); 

  } 

Sample: https://stackblitz.com/edit/angular-qxmnbw-rrbtb3?file=app.component.ts  

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

Regards, 

Hareesh 

Thanks!

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. 

Regards, 

Hareesh 

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.

Example:

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