How to fetch Data Base data for DropDown control in EJMVC custom window?
This knowledge base article explains the way to fetch Data Base data for DropDown control in custom appointment window.
Step 1: Create an MVC application with custom appointment window by referring the following user guide link.
https://help.syncfusion.com/aspnetmvc/schedule/customization#appointment-window-customization
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.CurrentDate(new DateTime(2015, 11, 12))
.ScheduleClientSideEvents(evt => evt.AppointmentWindowOpen("onAppointmentWindowOpen"))
.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
Step 2: During the initial load, assign the corresponding controller function to url field to assign the data collection to dropdown control as shown below.
$(function () {
$("#customWindow").ejDialog({
width: 600,
height: "auto",
position: { X: 400, Y: 200 },
showOnInit: false,
enableModal: true,
title: "Create Appointment",
enableResize: false,
allowKeyboardNavigation: false,
close: "clearFields"
});
$("#btncancel").ejButton({ width: '85px' });
$("#btnsubmit").ejButton({ width: '85px' });
$("#Status").ejDropDownList({
dataSource: ej.DataManager({
url: "/Home/GetDropData",
adaptor: new ej.UrlAdaptor()
}),
fields: { text: "text", id: "id", value: "text" }
});
});
Step 3: In the controller side, fetch and return the dropdown data from data base as shown below.
public JsonResult GetDropData()
{
IEnumerable data = new DataClasses1DataContext();
return Json(data, JsonRequestBehavior.AllowGet);
}
Step 4: Within the AppointmentWindowOpen event of scheduler, dropdown control is populated with the corresponding value as shown below.
function onAppointmentWindowOpen(args) {
args.cancel = true;
var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");
quickobj.close();
$("#StartTime").ejDateTimePicker({ value: args.startTime });
$("#EndTime").ejDateTimePicker({ value: args.endTime });
if (!ej.isNullOrUndefined(args.target)) {
if ($(args.target.currentTarget).hasClass("e-alldaycells"))
$("#allday").prop("checked", true);
else
args.model.currentView == "month" ? $("#allday").prop("checked", true) : $("#allday").prop("checked", false);
$("#StartTime,#EndTime").ejDateTimePicker({ enabled: ($(args.target.currentTarget).hasClass("e-alldaycells") || $(args.target.currentTarget).hasClass(
}
if (!ej.isNullOrUndefined(args.appointment)) {
$("#customId").val(args.appointment.Id);
$("#subject").val(args.appointment.Subject);
$("#customdescription").val(args.appointment.Description);
if (!ej.isNullOrUndefined(args.appointment.StatusId)) { //mapping the drop down field values in window
var Object = $("#Status").data("ejDropDownList");
var Value = ej.DataManager(Object.getListData()).executeLocal(new ej.Query().where("Id", "equal", args.appointment.StatusId))[0]["text"];
$("#Status").ejDropDownList("clearText");
$("#Status").ejDropDownList({ text: Value, value: Value });
}
$("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });
$("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });
$("#allday").prop("checked", args.appointment.AllDay);
$("#recurrence").prop("checked", args.appointment.Recurrence);
if (args.appointment.Recurrence) {
$("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase());
$("tr.recurrence").css("display", "table-row");
}
$("#customWindow").ejDialog("open");
}
else
$("#customWindow").ejDialog("open");
}
Step 5: Run the sample and open the custom window, dropdown control will be populated with the data base data collection as shown below.
Figure 1: Drop down control displaying data base data collection.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1455439119
