Articles in this section
Category / Section

How to dynamically add/remove the resources in the ASP.NET MVC Schedule control?

2 mins read

The following steps shows how to add/remove the resources to the schedule control based on the check box value we select in ASP.NET MVC Scheduler.

Step 1: Create a Schedule sample with Multiple Resources by referring the following links,

Online Sample Link:

Help document Link:

https://help.syncfusion.com/aspnetmvc/schedule/resources

Step 2: Create the required number of check boxes in your sample page each denoting a specific resource, so that selecting/deselecting it will automatically add/remove the appropriate resources in the schedule control. Refer the following code example to add the check boxes,

[CSHTML]

@{
    List<Resource> owner = (List<Resource>)ViewData["owner"];
    foreach (Resource item in owner)
    { 
    //render check box based on resources collection
@Html.EJ().CheckBox(@item.resText).Text(@item.resText).Checked(true).ClientSideEvents(eve => eve.Change("change"))
    }
}
 

 

Step 3: Bind the client-side change event to the checkboxes, so that it triggers whenever the state of the checkbox gets changed. Add the following code example within the change method to add/remove the resources to the schedule control.

[JavaScript]

var resourceData;
$(function () {
    //Get the resource data from controller page
    resourceData=@Html.ToJson(ViewData["owner"]);
});
 
function change(args) {
    //Create schedule object
    var schObj = $("#schAppointments").data("ejSchedule");
    //Get the resource object which we select to remove or add
    var resourceObject = ej.DataManager(resourceData).executeLocal(ej.Query().where("resText", ej.FilterOperators.equal, args.model.id));
    if (args.isChecked)
        changeClick(resourceObject);
    else
        removeClick(resourceObject);
}
 
function removeClick(value) {    //Method to remove the resource from schedule control
    var schObj = $("#schAppointments").data("ejSchedule");
        ej.DataManager(schObj.model.resources[0].resourceSettings.dataSource).remove("resId", value[0].resId);
    var resVal = schObj.model.resources[0].resourceSettings.dataSource;
    $("#schAppointments").ejSchedule({
        resources: [{
            field: "OwnerId",
            title: "Owner",
            name: "Owners", allowMultiple: false,
            resourceSettings: {
                dataSource: resVal,
                text: "resText", id: "resId", color:"rescolor"
            }
        }],
    });
}
 
function changeClick(args) {    //Method to add the resource to schedule control
    var schObj = $("#schAppointments").data("ejSchedule");
    schObj.model.resources[0].resourceSettings.dataSource.push(args[0]);
    var resVal = schObj.model.resources[0].resourceSettings.dataSource;
    var dManager = ej.DataManager({
        url: "/Home/GetData",
        crudUrl: "/Home/Batch",
        offline: false
    });
 
    dManager.adaptor = new ej.UrlAdaptor();
    $("#schAppointments").ejSchedule({
        appointmentSettings:{dataSource:dManager},
        resources: [{
            field: "OwnerId",
            title: "Owner",
            name: "Owners", allowMultiple: false,
            resourceSettings: {
                dataSource: resVal,
                text: "resText", id: "resId", color:"rescolor"
            }
       }],
    });
}

 

Step 4: Now run the sample. Check/Uncheck the resources check box, so that the related resources will get added/removed in the schedule control as shown in the below screenshots,

Scheduler displaying all the resources

Figure 1: Scheduler displaying all the resources.

 

Scheduler displaying 2 resources (Nancy & Michael)

Figure 2: Scheduler displaying 2 resources (Nancy & Michael)

Steven resource check box is checked additionally, so that Steven added to the scheduler

Figure 3: Steven resource check box is checked additionally, so that Steven added to the scheduler.

Sample Link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleSample-235790737.zip 

Conclusion

I hope you enjoyed learning about how to dynamically add/remove the resources in the schedule control.

You can refer to our 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 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 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
Please sign in to leave a comment
Access denied
Access denied