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");
}
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" }
}]
});
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" }
}]
});
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" }
}]
});
Thanks, I have already sorted it out as I explained earlier.
Cheers