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 dynamically add/remove the resources in the schedule control?

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: November 4, 2015 |
Last Revised Date: May 30, 2019 |
.NET Framework: 4.5

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

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

Online Sample Link:

http://mvc.syncfusion.com/demos/web/schedule/multipleresource

Help document Link:

http://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:

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

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
Comments
Peter Wakabi Waiswa
Nov 14, 2017

I am conversant with ASP.NET Forms. Can you provide me with a version of this sample for ASP.NET web forms?


Thanks


Peter

Reply

Please sign in to access our KB

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

Up arrow icon

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