Customise delete confirmation view on scheduler

[Oliver]

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

[Nevitha Ravi]

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. 

document.querySelector('.e-quick-dialog-cancel').click(); 

Regards, 

Nevitha. 

[Ivan]

Hello, 

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

actionBegin:

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

KR,
Ivan

[Hareesh Balasubramanian]

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') { 

      this.scheduleObj.deleteEvent(args.data); 

      args.cancel = true; 

    } 

  } 

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 

[Ivan]

Nice, 

it works.

Thanks!

[Vengatesh Maniraj]

Hi Ivan, 

Thanks for the update. 

We are happy that our solution has fulfilled your requirement. 

Regards, 

Vengatesh 

[Ivan]

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?

KR,
Ivan 

[Hareesh Balasubramanian]

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 

[Ivan]

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

Thanks!

[Hareesh Balasubramanian]

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 

[Ivan]

Hello. 

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