Prevent closing Schedule Editor Window on enter keypress

Question

Hi there, I am trying to prevent closing the Editor Window on the enter button keypress. I have an auto-complete in the editor template, and I'd like to select an option from the auto-complete without closing the editor.

Balasubramanian Sattanathan · Accepted Answer

Hi Eric, 
 
Thanks for the update. 
 
We have validated your reported scenario “I need to prevent closing the editor template on pressing the enter key in all scenarios” at our side and modified the previously shared sample based on your requirement by making use of the popupOpen and popupClose event of the Scheduler like the below code snippet. 
 




onPopupClose(args: PopupCloseEventArgs): void { 
  if (args.type === "Editor" && args.data && this.flag) { 
    let nameData = ((args.element.querySelector("#EventType") as EJ2Instance) 
      .ej2_instances[0] as AutoComplete).value; 
    (args.data as any).name = nameData; 
 
    // To prevent the event editor from closing 
    args.cancel = true; 
    this.flag = false; 
  } 
} 
public tempClick(args1, args2): void { 
  if (args2.key === "Enter") { 
    // It will be triggered when press the Enter key 
    args1.flag = true; 
  } 
} 
onPopupOpen(args: PopupOpenEventArgs): void { 
  if (args.type == 'Editor' && this.isBinding) { 
    let proxy = this.scheduleObj.eventWindow as any; 
    let dialogObj: Dialog = (args.element as EJ2Instance).ej2_instances[0] as Dialog; 
    // To bind the keydown event  
    dialogObj.element.addEventListener("keydown", this.tempClick.bind(event, this)); 
    dialogObj.dataBind(); 
    this.isBinding = false; 
 
    let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
    if (!startElement.classList.contains('e-datetimepicker')) { 
      new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
    } 
    let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
    if (!endElement.classList.contains('e-datetimepicker')) { 
      new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
    } 
 
    const formElement: HTMLElement = args.element.querySelector('.e-schedule-form') as HTMLElement; 
    this.validator = (formElement as EJ2Instance).ej2_instances[0] as FormValidator; 
    this.validator.addRules('EventType', { required: [true, 'need value'] }); 
  } 
} 
  
Sample: https://stackblitz.com/edit/angular-ej2-schedule-editor-template-validation-customiz-2y8gsw?file=app.component.ts 
 
Kindly try the above solution and let us know if this is helpful.  
 
Regards, 
Balasubramanian S

Balasubramanian Sattanathan · Answer

Hi Eric, 

Greetings from Syncfusion Support. 

We have validated your requirement “Prevent closing Schedule Editor Window on enter keypress” at our side and prepared a sample based on that using the below code snippet. 





onPopupClose(args: PopupCloseEventArgs): void { 
  if (args.type === "Editor" && args.data) { 
    let nameData = ((args.element.querySelector("#EventType") as EJ2Instance) 
      .ej2_instances[0] as AutoComplete).value; 
    (args.data as any).name = nameData; 
  } 
} 
 
onPopupOpen(args: PopupOpenEventArgs): void { 
  if (args.type === 'Editor') { 
    let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
    if (!startElement.classList.contains('e-datetimepicker')) { 
      new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
    } 
    let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
    if (!endElement.classList.contains('e-datetimepicker')) { 
      new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
    } 
 
    const formElement: HTMLElement = args.element.querySelector('.e-schedule-form') as HTMLElement; 
    this.validator = (formElement as EJ2Instance).ej2_instances[0] as FormValidator; 
    this.validator.addRules('EventType', { required: [true, 'need value'] }); 
  } 
} 

Sample: https://stackblitz.com/edit/angular-ej2-schedule-editor-template-validation-customiz-wqsy7c?file=app.component.html 

Kindly try the above sample and let us know if you need further assistance. 

Regards, 
Balasubramanian S

Eric · Answer

This is not helping in the scenario where the autocomplete already has a value. I need to prevent closing the editor template on pressing the enter key in all scenarios. Why is there no simple way to cancel that behavior?