How to populate DropDown data based on the top level resource in ASP.NET MVC Scheduler?
This knowledge base article explains the way to populate DropDown data based on the top-level resource in custom window in ASP.NET MVC Scheduler.
Step 1: Create a MVC Scheduler application with custom window and resource grouping options by referring the following user guide links.
https://help.syncfusion.com/aspnetmvc/schedule/customization#appointment-window-customization
https://help.syncfusion.com/aspnetmvc/schedule/resources#multi-level
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.CurrentDate(new DateTime(2015, 11, 12))
.Resources(res =>
{
res.Field("RoomId").Title("Room").Name("Rooms").AllowMultiple(false)
.ResourceSettings(flds => flds.Datasource(ViewBag.Rooms).Text("text").Id("id").Color("color")).Add();
res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(false)
.ResourceSettings(flds => flds.Datasource(ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
})
.Group(gr =>
{
gr.Resources(ViewBag.Resources);
})
.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")
.ResourceFields("RoomId,OwnerId"))
)
Step 2: Define the custom window form elements with the AutoComplete (for resource) and DropDown controls as shown in the following code example.
<div id="customWindow" style="display: none">
<form id="custom">
<table width="100%" cellpadding="5">
<tbody>
<tr style="display: none">
<td>
Id:
</td>
<td colspan="2">
<input id="customId" type="text" name="Id" />
</td>
</tr>
<tr>
<td>
Subject:
</td>
<td colspan="2">
<input id="subject" type="text" value="" name="Subject" onfocus="temp()" style="width: 100%" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td colspan="2">
<textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>
</td>
</tr>
<tr>
<td>
Customer:
</td>
<td colspan="2">
<input id="Customer" type="text" />
</td>
</tr>
<tr>
<td>
Room:
</td>
<td colspan="2">
<input id="RoomId" type="text" />
</td>
</tr>
<tr>
<td>
Owner:
</td>
<td colspan="2">
<input id="OwnerId" type="text" />
</td>
</tr>
<tr>
<td>
StartTime:
</td>
<td>
@Html.EJ().DateTimePicker("StartTime").Width("150px")
</td>
</tr>
<tr>
<td>
EndTime:
</td>
<td>
@Html.EJ().DateTimePicker("EndTime").Width("150px")
</td>
</tr>
<tr>
<td colspan="3">
<div class="customcheck">AllDay:</div>
<div class="customcheck">
<input id="allday" type="checkbox" name="AllDay" onchange="alldayCheck()" />
</div>
<div class="customcheck">Recurrence:</div>
<div>
<input id="recurrence" type="checkbox" name="Recurrence" onchange="recurCheck()" />
</div>
</td>
</tr>
<tr class="recurrence" style="display: none">
<td>
Type:
</td>
<td>
<select id="rType" name="freq">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<div>
<button type="submit" onclick="cancel()" id="btncancel" style="float:right;margin-right:20px;margin-bottom:10px;">Cancel</button>
<button type="submit" onclick="save()" id="btnsubmit" style="float:right;margin-right:20px;margin-bottom:10px;">Submit</button>
</div>
</div>
Step 3: Initialize the custom window controls like Button, DropDown, Dialog and AutoComplete as shown in the following code example.
$(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' });
$("#Customer").ejDropDownList({
dataSource: @Html.Raw(Json.Encode(ViewBag.dataSource)),
fields: { text: "text", id: "Id", value: "text" }
});
$("#RoomId").ejAutocomplete({
showPopupButton: true,
dataSource: @Html.Raw(Json.Encode(ViewBag.Rooms)),
fields: { text: "text", key: "id" },
width: "100%"
});
$("#OwnerId").ejAutocomplete({
showPopupButton: true,
dataSource: @Html.Raw(Json.Encode(ViewBag.Owners)),
fields: { text: "text", key: "id" },
width: "100%"
});
});
Step 4: With in AppointmentWindowOpen Scheduler events, DropDown control data is dynamically changed based on the top-level resource cell click as shown in the following code example.
function onAppointmentWindowOpen(args) {
args.cancel = true;
var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");
var Object = $("#OwnerId").data("ejAutocomplete");
var Object1 = $("#RoomId").data("ejAutocomplete");
quickobj.close();
var dropData = @Html.Raw(Json.Encode(ViewBag.datasource)); // here we are getting the data source collection from controller
$("#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("e-monthcells") || args.model.currentView == "month") ? false : true });
}
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.Customer)) { //mapping the drop down field values in window
var id = ej.DataManager(dropData).executeLocal(new ej.Query().where("text", "equal", args.appointment.Customer))[0]["groupId"];
$.ajax({// here we are using ajax post when the appointment is clicked
url: "/Home/GetDropData", type: 'POST', async:false, data: { groupId: id }, success: function (result) {
$("#Customer").ejDropDownList("option", "dataSource", result); // Assigns the filtered DataSource.
},
});
$("#Customer").ejDropDownList("clearText");
$("#Customer").ejDropDownList({ text: args.appointment.Customer, value: args.appointment.Customer });
}
var Value = ej.DataManager(Object.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId));
$("#OwnerId").ejAutocomplete("clearText");
$("#OwnerId").data("ejAutocomplete").selectValueByKey(Value[0].id);
var Value1 = ej.DataManager(Object1.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.RoomId));
$("#RoomId").ejAutocomplete("clearText");
$("#RoomId").data("ejAutocomplete").selectValueByKey(Value1[0].id);
$("#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{
var resCollection = ej.DataManager(this.model.resources[this.model.resources.length - 2].resourceSettings.dataSource).executeLocal(ej.Query().where("id", ej.FilterOperators.equal, args.resources.groupId));
var filterData=ej.DataManager(dropData).executeLocal(ej.Query().where("groupId", ej.FilterOperators.equal, resCollection[0].id));
$("#Customer").ejDropDownList("option", "dataSource", filterData); // Assign the filtered DataSource.
var Value = ej.DataManager(Object.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.resources.id));
$("#OwnerId").ejAutocomplete("clearText");
if(this.model.resources[1].allowMultiple)
var mode="visualmode";
else
var mode="none";
$("#OwnerId").ejAutocomplete("option", "multiSelectMode",mode );
$("#OwnerId").data("ejAutocomplete").selectValueByKey(Value[0].id);
var Value1 = ej.DataManager(Object1.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.resources.groupId));
$("#RoomId").ejAutocomplete("clearText");
if(this.model.resources[0].allowMultiple)
var mode="visualmode";
else
var mode="none";
$("#RoomId").ejAutocomplete("option", "multiSelectMode",mode );
$("#RoomId").data("ejAutocomplete").selectValueByKey(Value1[0].id);
$("#customWindow").ejDialog("open");
}
}
Step 5: Run the below sample, initially DropDown control has 4 data collections and double clicking the any cells under Room1 will populate only 2 as shown below.
Figure 1: DropDown control with custom collection based on Room1 cell click.
Example: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample297669316
Conclusion
I hope you enjoyed learning about how to populate DropDown data based on the top level resource in custom window in ASP.NET MVC Scheduler.
You can refer to our in ASP.NET MVC Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our in ASP.NET MVC Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
