|
In general, the number of resources to be added to the Schedule control are pre-defined during the control creation and all the resources are rendered based on the resource data. Here, the requirement is to group the resources under another level and display it dynamically on the Schedule control, based on the group selection. To do so, follow the steps provided. Step 1: Refer to the online sample here and create the usual resource grouping sample. Step 2: To switch between two groups, add an additional new group Manager by modifying the existing controller page code as follows, Controller List<Rooms> Rooms = new List<Rooms>();
List<Rooms> Owner = new List<Rooms>();
List<Rooms> Manager = new List<Rooms>();
//
// GET: /Schedule/
public ActionResult ScheduleFeatures()
{
Rooms.Add(new Rooms { text = "Room1", id = "1", color = "#cb6bb2" });
Rooms.Add(new Rooms { text = "Room2", id = "2", color = "#56ca85" });
Rooms.Add(new Rooms { text = "Room3", id = "3", color = "#56ca85" });
ViewBag.Rooms = Rooms;
Manager.Add(new Rooms { text = "Manager1", id = "10", groupId = "1", color = "#56ca85" });
Manager.Add(new Rooms { text = "Manager2", id = "11", groupId = "2", color = "#cb6bb2" });
Manager.Add(new Rooms { text = "Manager3", id = "12", groupId = "2", color = "#cb6bb2" });
ViewBag.Managers = Manager;
Owner.Add(new Rooms { text = "Nancy", id = "21", groupId = "10", color = "#ffaa00" });
Owner.Add(new Rooms { text = "Steven", id = "22", groupId = "11", color = "#f8a398" });
Owner.Add(new Rooms { text = "Michael", id = "25", groupId = "10", color = "#7499e1" });
Owner.Add(new Rooms { text = "Anusha", id = "31", groupId = "1", color = "#ffaa00" });
Owner.Add(new Rooms { text = "John", id = "33", groupId = "2", color = "#f8a398" });
ViewBag.Owners = Owner;
List<String> resources = new List<String>();
resources.Add("Owners");
ViewBag.Resources = resources;
return View();
}
Step 3: Modify the View page code as follows, to add the Manager group to the resources of the Schedule control. Also, map all the appropriate resource related fields to the resourceFields property within appointmentSettings as follows. ScheduleFeatures.cshtml @(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.CurrentDate(new DateTime(2014, 12, 2))
.TimeZone("UTC +5:30")
.CategorizeSettings(Fields => Fields.Datasource((System.Collections.IEnumerable)ViewBag.categorize).Enable(true).AllowMultiple(true).Id("id").Text("text").Color("color").FontColor("fontColor"))
.Resources(res =>
{
res.Field("RoomId").Title("Room").Name("Rooms").AllowMultiple(false)
.ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Rooms).Text("text").Id("id").Color("color")).Add(); res.Field("ManagerId").Title("Manager").Name("Managers").AllowMultiple(false)
.ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Managers).Text("text").Id("id").GroupId("groupId").Color("color")).Add(); res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true)
.ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
})
.Group(gr =>
{
gr.Resources(ViewBag.Resources);
})
.ScheduleClientSideEvents(evt => evt.Create("onCreate").Navigation("scheduleNavigation").AppointmentWindowOpen("onAppointmentWindowOpen").ResizeStart("OnResizeStart").AppointmentSaved("onAppointmentSaved"))
.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("Schedule/GetData").Adaptor("UrlAdaptor"))
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule")
.Categorize("Categorize")
.ResourceFields("RoomId,ManagerId,OwnerId"))
)
Step 4: Create two radio-buttons to handle the selection between the groups, Room and Manager, as follows. ScheduleFeatures.cshtml <div>
@Html.EJ().RadioButton("Rooms").Text("Rooms")
@Html.EJ().RadioButton("Manager").Text("Managers")
</div>
Step 5: You can dynamically change the group with its associated resources to be displayed on the Schedule control by clicking the required radio button. For this, you need to make use of the client-side event of the two radio-buttons as follows. ScheduleFeatures.cshtml <div>
@Html.EJ().RadioButton("Rooms").Text("Rooms").ClientSideEvents(eve => eve.Change("OnChange"))
@Html.EJ().RadioButton("Manager").Text("Managers").ClientSideEvents(eve => eve.Change("OnChange"))
</div>
Step 6: Define the client-side method onChange under the script section with the following code example to switch between the groups dynamically on the Schedule control, when the radio button is clicked. JavaScript <script>
function OnChange(args) {
if (args.model.checked) {
$("#Schedule1").ejSchedule({ group: { resources: [args.model.text, "Owners"] } });
}
}
</script>
Step 7: Now run the sample and the Schedule control is rendered with the initial data and resources as shown in the following screenshot.
Figure 1: Schedule with initial resources defined Step 8: Now, select the option Rooms and the Schedule control is rendered with the selected group Rooms and its associated resources as follows.
Figure 2: Selected group Rooms and its corresponding resources Step 9: Now, select the option Managers and the Schedule control displays the Manager group and its associated resources, as shown in the following screenshot.
Figure 3: Selected group Manager and its corresponding resources
|
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
