When you double-click the cell again, the editor does not appear.

Based on a sample (https://ej2.syncfusion.com/aspnetcore/Schedule/BlockEvents#/material) I created a scheduler, I created my own editor for new events, but I ran into one problem.

After loading the page and double-clicking in the scheduler cell, the editor will be displayed. But when I close it and double-click on the cell again, it will no longer appear and the console will display an error: 

Uncaught TypeError: Cannot set property 'innerHTML' of null
     at e.onCellDetailsUpdate (constants.js: 93)
     at e.openEditor (constants.js: 93)
     at e. (constants.js: 93)
     at e.notify (constants.js: 93)
     at t.e.trigger (constants.js: 93)
     at e.cellDblClick (constants.js: 93)

I am attaching a video showing the behavior of the editor window and the code.

Please help.

Thank you and best regards

Patrik

Attachment: bandicam_20210307_135910417_f9562e87.zip

5 Replies 1 reply marked as answer

RV Ravikumar Venkatesan Syncfusion Team March 8, 2021 09:10 AM UTC

Hi Patrik, 

Greetings from Syncfusion support. 

We have validated your reported query “double clicking the cell throws script error” at our end and the root cause of the problem is you have changed the header element of the editor window in the popupOpen event of the Schedule. We can customize the header content of the editor window with the help of the load method of the L10n class by replacing the default text values of the Schedule as shown below and for the same, we have prepared a sample that can be downloaded from the below link. 

[Index.cshtml] 
<ejs-schedule id="schedule" width="100%" height="550px" locale="cs" selectedDate="new DateTime(2018, 2, 15)"> 
</ejs-schedule> 
 
<script> 
    // We can change the default text contents of the Schedule with the help of the load method of the L10n class 
    var L10n = ej.base.L10n; 
    L10n.load({ 
        "cs": { 
            "schedule": { 
                "newEvent": "Test", 
            }, 
        } 
    }); 
</script> 


Kindly try the above sample and get back to us if you need any further assistance. 


Note: We suggest you to remove the below-highlighted line that you have used in the popupOpen event to resolve the problem and use the above solution to achieve your requirement. 
    function onPopupOpen(args) { 
        if (args.type === "Editor") { 
            var dialogObj = document.getElementById("schedule_dialog_wrapper").ej2_instances[0]; 
            dialogObj.header = '<div style="color:#ffffff"></div>'; 
        } 
    } 

Regards, 
Ravikumar Venkatesan 



PV Patrik Volka March 8, 2021 09:54 AM UTC

Thank you for the quick reply,
is there a way to insert text dynamically as a popup header?
The header will read: "New car reservation + car name".

That's why I changed the header.

Well thank you.


RV Ravikumar Venkatesan Syncfusion Team March 9, 2021 07:31 AM UTC

Hi Patrik, 

Thanks for the update. 

We have validated your requirement “Is there a way to insert text dynamically as a popup header?” at our end. We can achieve your requirement in the popupOpen event of the Schedule as shown below by changing only the text content of the editor window header and for the same, we have prepared a sample that can be available from the below link. 

 
[Index.cshtml] 
<script> 
    function onPopupOpen(args) { 
        if (args.type === "Editor") { 
            var dialogObj = document.getElementById("schedule_dialog_wrapper").ej2_instances[0]; 
            var carName = args.data.CarName; 
            dialogObj.headerEle.querySelector(".e-title-text").innerText = "New car reservation - " + (carName ? carName : "Unknown"); 
        } 
    } 
</script> 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer

PV Patrik Volka March 9, 2021 07:46 AM UTC

Thanks, it works as I imagined.

The last question on this topic is:
How do I force refresh events using popupClose?

Well thank you.


RV Ravikumar Venkatesan Syncfusion Team March 10, 2021 12:59 PM UTC

Hi Patrik, 

Thanks for the update. 

We have validated your requirement “How do I force refresh events using popupClose?” at our end and achieved it in popupClose event with help of refreshEvents method of Schedule and for the same, we have prepared a sample that can be available from the below link. 


[Index.cshtml] 
    function onPopupClose(args) { 
        if (args.type === "Editor") { 
            var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0]; 
            // Refresh Schedule events 
            scheduleObj.refreshEvents(); 
        } 
    } 


Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon