We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: February 17, 2015 |
Last Revised Date: May 23, 2019

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.

 

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

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/132062/ze/DynamicResourceFiltering-638246954

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon