Articles in this section
Category / Section

How to switch between resource groups dynamically in EJMVC Schedule control?

3 mins read

In general, the number of resources to be added to the ASP.NET MVC 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.

 

Schedule with initial resources defined

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.

Selected group Rooms, and it's corresponding resources

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.

Selected group Manager and it's corresponding resources

Figure 3: Selected group Manager and its corresponding resources

 

Conclusion

I hope you enjoyed learning about how to switch between resource groups dynamically in EJMVC Schedule control.

You can refer to our ASP.NET MVC Schedule 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 ASP.NET MVC Schedule 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied