We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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")))







7 Replies

CH Charles July 28, 2017 12:21 PM UTC

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); 
}


CH Charles July 28, 2017 02:27 PM UTC

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" }

            }]

        });

}
}


CH Charles July 28, 2017 05:48 PM UTC

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" }

            }]

        });



CH Charles July 28, 2017 05:50 PM UTC

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" }

            }]

        });



KK Karthigeyan Krishnamurthi Syncfusion Team July 31, 2017 04:15 AM UTC

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 



CH Charles July 31, 2017 09:06 AM UTC

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

Cheers



KK Karthigeyan Krishnamurthi Syncfusion Team August 1, 2017 04:30 AM UTC

Hi Charles,  
 
We are happy to hear that your issue has been resolved. 
 
Regards, 
Karthigeyan 



Loader.
Up arrow icon