onScheduleMouseDown : Uncaught ejDialog: methods/properties can be accessed only after plugin creation

[OriteK]

Hi There,

I've a strange error and I'm not able to find the cause nor the solution. 

My environment : 

- Visual Studio 2017 Community

- MVC 5

- EF 6 Code First

- Syncfusion 14.3.0.49

- I'm using Unobtrusive Ajax (set to True in web config), so as described in documentation I've included the ej.unobtrusive.min.js in my bundles.

Problem description : 

The scheduler is loading correctly in my first call, using Ajax and ej.widget.init('#mycontainer')

After a second call, I still have the scheduler load correctly, it is fully working but, any click on the scheduler or any other component in my google chrome window I'm receiving console error (Google Developer tools) 

ERROR : Uncaught ejDialog: methods/properties can be accessed only after plugin creation

as shown in attached image

Please can you help to figure out why this strange error is raised on each click in any part of the window, if you need more details please do not hesitate

Kind regards

OriteK

Attachment: oritekissuescheduler_717e8cb9.zip

[Karthigeyan Krishnamurthi]

Hi OriteK, 

 

Thank you for contacting Syncfusion support. 

 

We were unable to reproduce the reported issue at our end and for the same we have prepared the sample which can be download from the below location. 

https://www.syncfusion.com/downloads/support/directtrac/171708/ze/Sample1579414371 

 

In the above sample default Schedule is rendered in Unobtrusive mode. Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert it back to us. Or else you can share your code example/runnable sample (if possible) to proceed further.  Kindly visit the below KB link to know more about rendering the Schedule in Unobtrusive mode. 

KB link: https://www.syncfusion.com/kb/4092/how-to-render-the-schedule-control-by-enabling-unobtrusivejavascriptenabled 

 

Note: Kindly restore the package in the above sample. 

Regards, 

Karthigeyan 

[OriteK]

Hi Karthigeyan,

I've been able to try the attached sample, it is fully working. 

But this sample cannot be applied to my issue. In your attached sample, you are calling the scheduler in your index.cshtml view.

This view is called by the controller HomeController using an ActionResult method. (This works if I use it on my app)

For my case, I'm trying to call the scheduler inside a Partial view, using AJAX 

    $('#tab-agenda').click(function () {

        $.ajax({

            url: 'Calendar/Agenda',

            cache: false,

            dataType: 'html',

            success: function (data) {

                $('#main-container').html(data);

                $('#main-container').effect('slide', { direction: 'up' }, 200);

                ej.widget.init($("div#agenda"));

           

            }

        });

    });

This is now my CalenderController action:

        public ActionResult Agenda()

        {

            List<ScheduleData> data = new List<ScheduleData> {

                                             new ScheduleData {

                                                    ProgramName = "Turtle Walk",

                                                    Comments = "Night out with turtles",

                                                    ProgramStartTime = new DateTime(2016, 6, 2, 3, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 2, 4, 0, 0),

                                                    IsAllDay = true

                                             },

                                             new ScheduleData {

                                                    ProgramName = "Winter Sleepers",

                                                    Comments = "Long sleep during winter season",

                                                    ProgramStartTime = new DateTime(2016, 6, 3, 1, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 3, 2, 0, 0)

                                             },

                                             new ScheduleData {

                                                    ProgramName = "Estivation",

                                                    Comments = "Sleeping in hot season",

                                                    ProgramStartTime = new DateTime(2016, 6, 4, 3, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 4, 4, 0, 0)

                                             }

                                            };

            return PartialView("_agenda", data);

        }

The partial view contains only this : 

<div id="agenda" class="page-article">

    <div class="row">

        <br />

    </div>

    <div class="row">

        <div class="col s10 m10 l10 offset-l2">

            @(Html.EJ().Schedule("Schedule1")

        .CurrentDate(DateTime.Now)

        .TimeMode(TimeMode.Hour24))

        </div>

    </div>

</div>

Kind Regards 

OriteK

[OriteK]

Hi Karthigeyan,

I've forget to precise one thing. The first Load of the Scheduler component is done without any issues. After calling the partial view a second time, then I'm getting the issue described.

Kind regards

OriteK

[Karthigeyan Krishnamurthi]

Hi OriteK,   

   

Thanks for your update.  

   

We Suspect that Schedule is not destroyed properly, before rendering it again, which is the cause for the issue. Kindly include the below code example in your project to overcome the reported issue “Uncaught ejDialog: methods/properties can be accessed only after plugin creation”.   

   

<Code>   

$.ajax({ 

                url: '/Home/About', 

                success: function (data) { 

                    if (!ej.isNullOrUndefined($("#Schedule1").ejSchedule("instance"))) 

                        $("#Schedule1").ejSchedule('destroy'); 

                    $('#main-container').html(data); 

                    ej.widget.init($("#main-container")); 

 

                } 

            }); 

</Code> 

 

  

In the above code example, Schedule is destroyed before rendering it again.   

   

Regards,   

Karthigeyan   

[OriteK]

Hi Karthigeyan,

Thank you for your help, now it is working correctly.

When you say : Schedule is not destroyed properly, before rendering it again, is this a bug ? 

If it is not a bug, can you please show me the proper way to destroy syncfusion components for my future projects. If there is a documentation about this it will be very helpful.

One again, thank you a lot for your time and efforts

Regards

Abdelkader KEBIR

OriteK

[Karthigeyan Krishnamurthi]

Hi OriteK, 

 

Thanks for your update. 

 

We are happy to hear that your issue has been resolved. 

 

It is not an issue. In your project Schedule been rendered repeatedly based on the button (About tab) click. In that case Scheduler events, will not be removed properly and to overcome that issue we need to destroy the Scheduler completely before rendering the new Scheduler. The solution provided in our previous update is the proper way to destroy all Syncfusion components with its respective widget name. Kindly visit the below link to know more about Scheduler destroy method. 

https://help.syncfusion.com/api/js/ejschedule#methods:destroy 

 

<Code> 

$("#Grid").ejGrid('destroy'); // for Grid control 

</Code> 

 

Regards, 

Karthigeyan 

[OriteK]

Hello Karthigeyan,

Thank you for your assistance and support.

Kind regards

Abdelkader KEBIR

OriteK

[Karthigeyan Krishnamurthi]

Hi OriteK,  

  

Thanks for your update.  

Please let us know if you need further assistance. 

Regards, 

Karthigeyan 

[Jibran Ahmed Sheikh]

Hi Karthigeyan,

I've been able to try the attached sample, it is fully working. 

But this sample cannot be applied to my issue. In your attached sample, you are calling the scheduler in your index.cshtml view.

This view is called by the controller HomeController using an ActionResult method. (This works if I use it on my app)

For my case, I'm trying to call the scheduler inside a Partial view, using AJAX 

    $('#tab-agenda').click(function () {

        $.ajax({

            url: 'Calendar/Agenda',

            cache: false,

            dataType: 'html',

            success: function (data) {

                $('#main-container').html(data);

                $('#main-container').effect('slide', { direction: 'up' }, 200);

                ej.widget.init($("div#agenda"));

           

            }

        });

    });

This is now my CalenderController action:

        public ActionResult Agenda()

        {

            List<ScheduleData> data = new List<ScheduleData> {

                                             new ScheduleData {

                                                    ProgramName = "Turtle Walk",

                                                    Comments = "Night out with turtles",

                                                    ProgramStartTime = new DateTime(2016, 6, 2, 3, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 2, 4, 0, 0),

                                                    IsAllDay = true

                                             },

                                             new ScheduleData {

                                                    ProgramName = "Winter Sleepers",

                                                    Comments = "Long sleep during winter season",

                                                    ProgramStartTime = new DateTime(2016, 6, 3, 1, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 3, 2, 0, 0)

                                             },

                                             new ScheduleData {

                                                    ProgramName = "Estivation",

                                                    Comments = "Sleeping in hot season",

                                                    ProgramStartTime = new DateTime(2016, 6, 4, 3, 0, 0),

                                                    ProgramEndTime = new DateTime(2016, 6, 4, 4, 0, 0)

                                             }

                                            };

            return PartialView("_agenda", data);

        }

The partial view contains only this : 

<div id="agenda" class="page-article">

    <div class="row">

        <br />

    div>

    <div class="row">

        <div class="col s10 m10 l10 offset-l2">

            @(Html.EJ().Schedule("Schedule1")

        .CurrentDate(DateTime.Now)

        .TimeMode(TimeMode.Hour24))

        div>

    div>

div>

Kind Regards 

OriteK

When I got stuck I contacted "Codup.co" to help me out. I really appreciate it that you guys provided solutions here. If something happens again, I can easily solve that now :)

[Hareesh Balasubramanian]

Hi Jibran, 

Thanks for the update. 

We have validated your shared code snippets and suspect that your requirement is to render the Scheduler through partial view. So, we suggest you to refer and follow the below link to achieve your requirement. 

https://www.syncfusion.com/kb/7816/how-to-render-schedule-through-partial-view-in-unobtrusive-mode  

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

Regards, 

Hareesh