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

[Charles]

Goodday,

Am using the Schedule Control using Crud MVC Controller Action Binding. Also I use a custom appointmentwindow.

Using the image below, I have the following issues.

Anytime I edit a single Repeat Appointment, it works and if I now Delete it, it will delete but if I want to immediately delete another single appointment or entire series of recurrent appointment after deleting a previous Repeat Appointment. I have the following error ejDialog: methods/properties can be accessed only after plugin creation as shown below.

Secondly, Is it possible to change the Text in the dialog box. I mean the green marked Text in the images below. I want to change the word Appointment to like Booking.

Below is my Schedule Control Creation Code.

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

                      .Width("100%")

                      .Height("725px")

                      // .CellWidth("50px")

                      // .TimeZone("UTC +01:00")

                      .CurrentDate(schedulableDay)

                      //.MinDate(minDateTime)

                      //.MaxDate(maxDateTime)

                      .HighlightBusinessHours(true)

                      //.Orientation(Orientation.Horizontal)

                      //.BusinessStartHour(Model.Setting.BusinessStartHour)

                      //.BusinessEndHour(Model.Setting.BusinessEndHour)

                      .WorkHours(x => x.Highlight(true).Start(Model.Setting.BusinessStartHour).End(Model.Setting.BusinessEndHour))

                      .StartHour(Model.Setting.ScheduleStartHour)

                      .EndHour(Model.Setting.ScheduleEndHour)

                      .AgendaViewSettings(i => i.DaysInAgenda(14))

                      .TimeMode(timemode)

                      .Resources(res =>

                      {

                          res.Field("TerritoryId").Title("Territory").Name("Territories").AllowMultiple(true).ResourceSettings(fld => fld.Datasource(initialTerrittory)

                              .Text("Text").Id("Id")).Add();

                          res.Field("RouteId").Title("Route").Name("Routes").AllowMultiple(true).ResourceSettings(flds => flds.Datasource(initialTerritoryRoutes)

                              .Text("Text").Id("Id").GroupId("GroupId").Color("Color")).Add();

                      })

                      .Group(gr => gr.Resources(Group))

                      .ShowLocationField(true)

                      .CategorizeSettings(cat => cat.Enable(true))

                      .ShowAllDayRow(false)

                      //.PrioritySettings(pri => pri.Enable(true))

                      .ShowCurrentTimeIndicator(true)

                      .Views(view)

                      .CurrentView(CurrentView.Month)

                      .AppointmentSettings(fields => fields.Datasource(ds => ds.URL(@Url.Action("GetCompanyScheduledRoutes", "Route", new { companyid = Model.Id, routeid = firstroute, territoryid = firstterritory })).InsertURL(Url.Action("AddScheduledRoutes", "Route", new { companyid = Model.Id }))

                          .BatchURL(@Url.Action("Crud", "Route")).RemoveURL(@Url.Action("RemoveCompanyScheduledRoutes", "Route", new { companyid = Model.Id }))

                          .UpdateURL(@Url.Action("UpdateCompanyScheduledRoutes", "Route", new { companyid = Model.Id })).Adaptor(AdaptorType.UrlAdaptor))

                          .Id("Id")

                          .Subject("Subject")

                          .StartTime("StartTime")

                          .EndTime("EndTime")

                          .StartTimeZone("StartTimeZone")

                          .EndTimeZone("EndTimeZone")

                          .Description("Comments")

                          .AllDay("AllDay")

                          .Recurrence("Recurrence")

                          .RecurrenceRule("RecurrenceRule")

                          .RecurrenceId("RecurrenceId")

                          .RecurrenceExDate("RecurrenceExDate")

                          .Location("Location")

                          .ResourceFields("TerritoryId, RouteId"))

                      .ScheduleClientSideEvents(eve => eve.Navigation("OnNavigation").QueryCellInfo("OnQueryCellInfo").CellClick("OnCellClick").AppointmentWindowOpen("onAppointmentWindowOpen")))

[Charles]

This is my Custom Appointment Window Open code

function onAppointmentWindowOpen(args) {

    var schObj = $("#routeSchedule").ejSchedule('instance');

    args.cancel = true;

    $("#recurrence").ejCheckBox({ checked: false, enabled: true });

    $("#recWindow").css("display", "none");

    $("#editApp").css("display", "none");

    $("#appWindow").css("display", "block");

    // When double clicked on the Scheduler cells, fills the StartTime and EndTime fields appropriately

    $("#StartTime").ejDateTimePicker({ value: args.startTime });

    $("#EndTime").ejDateTimePicker({ value: args.endTime });

    $("#recWindow").css("display", "none");

    $("#appWindow").css("display", "");

    $('#subject').val(subjectTime(new Date(args.endTime)));

    if (args.model.currentView == "month") {

        var currentDate = new Date();

        var appointedDate = new Date(args.endTime);

        var currentappointedTime = new Date(appointedDate.getFullYear(),  appointedDate.getMonth(), appointedDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());

        $("#StartTime").ejDateTimePicker({ value: subtract_minutes(currentappointedTime, window.checkInMinutes) });

        $("#EndTime").ejDateTimePicker({ value: currentappointedTime });

        $('#subject').val(subjectTime(new Date(currentappointedTime)));

    }

    if (ej.isNullOrUndefined(args.edit)) {

        var res = args.model.resources[0].resourceSettings.dataSource;

        $("#Territory").ejDropDownList({ dataSource: res, width: "100%", fields: { text: "Text", id: "Td", value: "Text" } });

        var res2 = new ej.DataManager(res).executeLocal(new ej.Query().where(args.model.resources[args.model.resources.length - 1].resourceSettings["id"],

            ej.FilterOperators.equal, args.resources.GroupId));

        var res1 = new ej.DataManager(args.model.resources[args.model.resources.length - 1].resourceSettings.dataSource).executeLocal(new ej.Query().where

            (args.model.resources[args.model.resources.length - 1].resourceSettings["groupId"], ej.FilterOperators.equal, args.resources.GroupId));

        $("#TerritoryRoutes").ejDropDownList({ dataSource: res1, width: "100%", fields: { text: "Text", id: "Td", value: "Text" } });

        $("#TerritoryRoutes").data("ejDropDownList").selectItemByText(args.resources.Text);

        $("#Territory").data("ejDropDownList").selectItemByText(res2[0].Text);

    } else {

        var res = new ej.DataManager(args.model.resources[0].resourceSettings.dataSource).executeLocal(new ej.Query().where(args.model.resources[0].resourceSettings["id"], ej.FilterOperators.equal, args.appointment.TerritoryId));

        $("#Territory").ejDropDownList({ dataSource: args.model.resources[0].resourceSettings.dataSource, fields: { text: "Text", id: "Id", value: "Text" } });

        $("#Territory").data("ejDropDownList").selectItemByText(res[0].Text);

        var res2 = new ej.DataManager(args.model.resources[args.model.resources.length - 1].resourceSettings.dataSource).executeLocal(new ej.Query().where(args.model.resources[args.model.resources.length - 1].resourceSettings["groupId"], ej.FilterOperators.equal, res[0].Id));

        $("#TerritoryRoutes").ejDropDownList({ dataSource: res2, fields: { text: "Text", id: "Id", value: "Text" } });

        var res1 = new ej.DataManager(args.model.resources[args.model.resources.length - 1].resourceSettings.dataSource).executeLocal(new ej.Query().where(args.model.resources[args.model.resources.length - 1].resourceSettings["id"], ej.FilterOperators.equal, args.appointment.RouteId));

        $("#TerritoryRoutes").data("ejDropDownList").selectItemByText(res1[0].Text);

        window.appedit = ej.isNullOrUndefined(args.waitinglistedit) ? true : false;

    }

    if (!ej.isNullOrUndefined(args.target)) {

        $('#recurrence').prop('disabled', false);

        recurCheck();

        $("#EndTime").ejDateTimePicker({

            enabled: ($(args.target.currentTarget).hasClass("e-alldaycells")) ? false : true });

 }

    if (!ej.isNullOrUndefined(args.appointment)) {

        window.appointmentRule = null;

        $("#customId").val(args.appointment.Id);

        $("#subject").val(args.appointment.Subject);

        $("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });

        $("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });

        if (args.appointment.Recurrence) {

            $("#recurrence")

                .ejCheckBox({

                    checked: args.appointment.Recurrence,

                    enabled: (schObj._currentAction == "editSeries") ? true : false

                });

            if (schObj._currentAction == "editSeries") {

                $("#editApp").css("display", "block");

                window.appointmentRule = args.appointment.RecurrenceRule;

            }

        } else

            $("#recurrence").ejCheckBox({ checked: false, enabled: true });

        $("#recWindow").css("display", "none");

        $("#appWindow").css("display", "block");

    }

$("#customWindow").ejDialog("open");

}

function save() {

    // checks if the subject value is not left blank before saving it.

    if ($.trim($("#subject").val()) == "") {

        $("#subject").addClass("error");

        return false;

    }

    var obj = {}, temp = {}, rType;

    var formelement = $("#customWindow").find("#custom").get(0);

    for (var index = 0; index < formelement.length; index++) {

        var columnName = formelement[index].name, $element = $(formelement[index]);

        if (columnName != undefined) {

            if (columnName == "")

                columnName = formelement[index].id.replace(this._id, "");

            if (columnName != "" && obj[columnName] == null) {

                var value = formelement[index].value;

                if (columnName == "Id" && value != "") {

                    value = parseInt(value);

                    window.appointedit = true;

                }

                if ($element.hasClass("e-datetimepicker"))

                    value = new Date(value);

                if (formelement[index].type == "checkbox")

                    value = formelement[index].checked;

                if (formelement[index].type == "hidden") {

                    var resdata = (columnName == "Territory") ? window.routeTerritories : window.routes;

                    var territoryId = new ej.DataManager(resdata).executeLocal(new ej.Query().where("Text", ej.FilterOperators.equal, value));

                    if (territoryId.length > 0)

                        (columnName == "Territory") ? obj["TerritoryId"] = territoryId[0].Id : obj["RouteId"] = territoryId[0].Id;

                }

 if (columnName != "Territory_hidden" && columnName != "TerritoryRoutes_hidden") {

                    obj[columnName] = value;

                }

  }

        }

    }

 obj["RecurrenceRule"] = (obj.Recurrence) ? window.recurRule : null;

    obj["CompanyId"] = $('#Id').val();

    $("#customWindow").ejDialog("close");

 var schObj = $("#routeSchedule").ejSchedule('instance');

 schObj.saveAppointment(obj); 

}

[Charles]

Goodday,

Going through some past threads, I saw a thread that seems to shed some light into what the issue could be https://www.syncfusion.com/forums/128561/onschedulemousedown-uncaught-ejdialog-methods-properties-can-be-accessed-only-after-plugin-creation

Looking at he image below, there is a dropdownlist and a listbox that both triggers an event that recreates the schedule control. Could that be the problem.

 <div class="box-body">

                @(Html.EJ().DropDownList("routeRegionList")

                            .Datasource(CompanyRouteTerritories)

                            .DropDownListFields(df => df.ID("Id").Text("Text").Value("Id"))

                            .ClientSideEvents(evt => evt.Change("regionListChange"))

                            .WatermarkText("Select Location")

                            .Width("100%").SelectedIndex(0))

            </div>

            <div class="box-body">

                @Html.EJ().ListBox("routeList").Datasource(territoryRoutes).Width("100%").ClientSideEvents(evt => evt.CheckChange("routeCheckChange").Selected("onRouteSelect")).ListBoxFields(df => df.Text("Text").Value("Id").ID("Id"))

            </div>

function regionListChange(args) {

    var routeList = new ej.DataManager(window.routes).executeLocal(new ej.Query().where("GroupId", "equal", args.value));

    var territoryList = new ej.DataManager(window.routeTerritories).executeLocal(new ej.Query().where("Id", "equal", args.value));

    var companyid = $('#Id').val();

    var firstRouteList = routeList;

    $("#routeList").ejListBox({

        dataSource: routeList,

        fields: {

            id: "Id",

            text: "Text"

        }

    });

    if (routeList.length > 0) {

        firstRouteList = new ej.DataManager(window.routes).executeLocal(new ej.Query().where("Text", "equal", routeList[0].Text));

        var dataManager = ej.DataManager({

            url: "/Admin/Apps/SyncBus/Route/getCompanyscheduledroutes?companyid=" + companyid + "&routeid=" + firstRouteList[0].Id, //  This will trigger to bind the appointments data to schedule control

            batchUrl: "Home/Crud", // This will trigger while saving the appointment through detail window

            insertUrl: "/Admin/Apps/SyncBus/Route/AddScheduledRoutes?companyid=" + companyid, // This will trigger while saving the appointment through quick window

            updateUrl: "/Admin/Apps/SyncBus/Route/UpdateCompanyScheduledRoutes?companyid=" + companyid, //This will trigger while saving the resize or drag and drop the appointment 

            removeUrl: "/Admin/Apps/SyncBus/Route/RemoveCompanyScheduledRoutes?companyid=" + companyid, // This will trigger to delete the single appointment

            adaptor: new ej.UrlAdaptor()

        });;

        $("#routeSchedule").ejSchedule({

            appointmentWindowOpen: onAppointmentWindowOpen,

            // orientation: (newlist.length > 2) ? "horizontal" : "vertical",

            // cellWidth: (newlist.length > 2) ? "100px" : "",

            appointmentSettings: {

                dataSource: dataManager

                //applyTimeOffset: false

            },

            resources: [{

                field: "TerritoryId", title: "Territory", name: "Territories", allowMultiple: false,

                resourceSettings: { dataSource: $.extend(true, [], territoryList), text: "Text", id: "Id", groupId: "GroupId" }

            }, {

                field: "RouteId", title: "Route", name: "Routes", allowMultiple: true,

                resourceSettings: { dataSource: $.extend(true, [], firstRouteList), text: "Text", id: "Id", groupId: "GroupId", color: "Color" }

            }]

        });

}

    }

function onRouteSelect(args) {

    var instance = $("#routeRegionList").data("ejDropDownList");

    var companyid = $('#Id').val();

    var currentRouteList = new ej.DataManager(window.routes).executeLocal(new ej.Query().where("Text", "equal", args.text));

    var territoryList = new ej.DataManager(window.routeTerritories)

        .executeLocal(new ej.Query().where("Id", "equal", instance.option("value")));

    if (currentRouteList.length > 0) {

        var dataManager = ej.DataManager({

            url: "/Admin/Apps/SyncBus/Route/getCompanyscheduledroutes?companyid=" + companyid + "&routeid=" + currentRouteList[0].Id, //  This will trigger to bind the appointments data to schedule control

            batchUrl: "Home/Crud", // This will trigger while saving the appointment through detail window

            insertUrl: "/Admin/Apps/SyncBus/Route/AddScheduledRoutes?companyid=" + companyid, // This will trigger while saving the appointment through quick window

            updateUrl: "/Admin/Apps/SyncBus/Route/UpdateCompanyScheduledRoutes?companyid=" + companyid, //This will trigger while saving the resize or drag and drop the appointment 

            removeUrl: "/Admin/Apps/SyncBus/Route/RemoveCompanyScheduledRoutes?companyid=" + companyid, // This will trigger to delete the single appointment

            adaptor: new ej.UrlAdaptor()

        });;

        // console.log(dataManager); AddScheduledRoutes

        console.log(currentRouteList);

        //console.log(data);

        $("#routeSchedule").ejSchedule({

            appointmentWindowOpen: onAppointmentWindowOpen,

            // orientation: (newlist.length > 2) ? "horizontal" : "vertical",

            // cellWidth: (newlist.length > 2) ? "100px" : "",

            appointmentSettings: {

                dataSource: dataManager

                //applyTimeOffset: false

            },

            resources: [{

                field: "TerritoryId", title: "Territory", name: "Territories", allowMultiple: false,

                resourceSettings: { dataSource: $.extend(true, [], territoryList), text: "Text", id: "Id", groupId: "GroupId" }

            }, {

                field: "RouteId", title: "Route", name: "Routes", allowMultiple: true,

                resourceSettings: { dataSource: $.extend(true, [], currentRouteList), text: "Text", id: "Id", groupId: "GroupId", color: "Color" }

            }]

        });

}

}

[Charles]

Goodday, I have resolved it by destroying the existing instance of Schedule Control before creating another one. Though if there is a better solution, please let me know.

Cheers.

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

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

        $("#routeSchedule").ejSchedule({

            appointmentWindowOpen: onAppointmentWindowOpen,

            navigation: OnNavigation,

            queryCellInfo: "OnQueryCellInfo",

            cellClick: "OnCellClick",

            width: "100%",

            height: "725px",

            currentDate: new Date(window.startScheduleDay),

            views: ["Day", "Week", "Month", "Agenda"],

            currentView: ej.Schedule.CurrentView.Month,

            showNextPrevMonth: true,

            agendaViewSettings: {

                //Next 5 days Appointments lists out from current date

                daysInAgenda: 14

            },

            showAllDayRow: false,

            highlightBusinessHours: true,

            timeMode: window.timeMode,

            startHour: window.startHour,

            endHour: window.endHour,

            workHours : {

                hightlight: true,

                start: window.businessStartHour,

                end: window.businessEndHour

            },

            // orientation: (newlist.length > 2) ? "horizontal" : "vertical",

            // cellWidth: (newlist.length > 2) ? "100px" : "",

            appointmentSettings: {

                dataSource: dataManager,

                resourceFields: "TerritoryId, RouteId"

                //applyTimeOffset: false

            },

            group: {

                resources: ["Territories", "Routes"]

            },

            resources: [{

                field: "TerritoryId", title: "Territory", name: "Territories", allowMultiple: false,

                resourceSettings: { dataSource: $.extend(true, [], territoryList), text: "Text", id: "Id", groupId: "GroupId" }

            }, {

                field: "RouteId", title: "Route", name: "Routes", allowMultiple: true,

                resourceSettings: { dataSource: $.extend(true, [], firstRouteList), text: "Text", id: "Id", groupId: "GroupId", color: "Color" }

            }]

        });

[Charles]

Goodday,

I have resolved it by destroying the existing instance of the schedule control before creating another one. If there is a better solution, please let me know.

Cheers

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

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

        $("#routeSchedule").ejSchedule({

            appointmentWindowOpen: onAppointmentWindowOpen,

            navigation: OnNavigation,

            queryCellInfo: "OnQueryCellInfo",

            cellClick: "OnCellClick",

            width: "100%",

            height: "725px",

            currentDate: new Date(window.startScheduleDay),

            views: ["Day", "Week", "Month", "Agenda"],

            currentView: ej.Schedule.CurrentView.Month,

            showNextPrevMonth: true,

            agendaViewSettings: {

                //Next 5 days Appointments lists out from current date

                daysInAgenda: 14

            },

            showAllDayRow: false,

            highlightBusinessHours: true,

            timeMode: window.timeMode,

            startHour: window.startHour,

            endHour: window.endHour,

            workHours : {

                hightlight: true,

                start: window.businessStartHour,

                end: window.businessEndHour

            },

            // orientation: (newlist.length > 2) ? "horizontal" : "vertical",

            // cellWidth: (newlist.length > 2) ? "100px" : "",

            appointmentSettings: {

                dataSource: dataManager,

                resourceFields: "TerritoryId, RouteId"

                //applyTimeOffset: false

            },

            group: {

                resources: ["Territories", "Routes"]

            },

            resources: [{

                field: "TerritoryId", title: "Territory", name: "Territories", allowMultiple: false,

                resourceSettings: { dataSource: $.extend(true, [], territoryList), text: "Text", id: "Id", groupId: "GroupId" }

            }, {

                field: "RouteId", title: "Route", name: "Routes", allowMultiple: true,

                resourceSettings: { dataSource: $.extend(true, [], firstRouteList), text: "Text", id: "Id", groupId: "GroupId", color: "Color" }

            }]

        });

[Karthigeyan Krishnamurthi]

Hi Charles, 

 

Thank you for contacting Syncfusion support. 

 

The cause for the issue “ejDialog: methods/properties can be accessed only after plugin creation” is re-rendering the Schedule before properly destroying the previous Scheduler elements. The recommended way to overcome the issue is to properly destroy the Schedule elements before re-rendering it. We request you to proceed with your solution. 

 

Regards, 

Karthigeyan 

[Charles]

Thanks, I have already sorted it out as I explained earlier.

Cheers

[Karthigeyan Krishnamurthi]

Hi Charles,  

 

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

 

Regards, 

Karthigeyan