Replace syncfusion edit dialog box during a double click

Question

Hi,We have our own dialog box to edit appointments. It works well except when you double click on the appointment, it is the syncfusion dialog box but not our own dialog box.How to fix this problem ?Regards​​

Satheesh Kumar Balasubramanian · Answer

Hi Gilles,Greetings from Syncfusion support.You can prevent our default editor on double click using popupOpen event and open your own dialog. please refer to the following UG.https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/#how-to-prevent-the-display-of-editor-and-quick-popups
Please let us know if you need any further assistance.Regards,
Satheesh Kumar B

Gilles · Answer

Sorry but i don't want only cancel the double click action.

But cancel double click in empty cell and connect my own dialog box when user double click in appointment cell filled

Could you give me a sample code ?

Regards

Balasubramanian Sattanathan · Answer

Hi Gilles, 

Thanks for the update. 

We can prevent the default editor window by providing the args.cancel as true only if the args.type is the Editor. And also you can call your own custom dialog inside it. We have prepared a sample based on your requirement which can be available from the below link.  
https://stackblitz.com/edit/custom-window-epf3l1?file=index.js 





popupOpen: function (args) { 
  if (args.type == "Editor") { 
    args.cancel = true; 
    isCell = args.target.classList.contains("e-work-cells"); 
    var startElement = document.querySelector("#StartTime.start-time"); 
    if (!startElement.classList.contains("e-datetimepicker")) { 
      new ej.calendars.DateTimePicker( 
        { value: args.data.StartTime || new Date() }, 
        startElement 
      ); 
    } else { 
      startObj = startElement.ej2_instances[0]; 
      startObj.value = args.data.StartTime; 
      startObj.dataBind(); 
    } 
    var endElement = document.querySelector("#EndTime.end-time"); 
    if (!endElement.classList.contains("e-datetimepicker")) { 
      new ej.calendars.DateTimePicker( 
        { value: args.data.EndTime || new Date() }, 
        endElement 
      ); 
    } else { 
      endObj = endElement.ej2_instances[0]; 
      endObj.value = args.data.EndTime; 
      endObj.dataBind(); 
    } 
    dlgObj.show(); 
  } 
} 

UG: 
https://ej2.syncfusion.com/javascript/demos/#/material/schedule/editor-template.html   
https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/#customizing-event-editor-using-template   

Kindly refer to the above sample and UG links, let us know if you need further assistance. 

Regards, 
Balasubramanian S