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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131821 Jul 28,2017 12:07 PM UTC Aug 1,2017 04:30 AM UTC ASP.NET MVC 7
loading
Tags: Schedule
Charles
Asked On July 28, 2017 12:07 PM UTC

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

Charles
Replied On 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" }

            }]

        });

}
}

Charles
Replied On 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" }

            }]

        });


Charles
Replied On 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" }

            }]

        });


Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Charles
Replied On July 31, 2017 09:06 AM UTC

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

Cheers


Karthigeyan Krishnamurthi [Syncfusion]
Replied On August 1, 2017 04:30 AM UTC

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;