Kendo UI Web Scheduler - Modifying resources dataSource dynamically

Question

I'm trying to change the resources dataSource dynamically, but the changes I am making are not being applied to the Scheduler.

I've created a scheduler like so:

$("#scheduler").kendoScheduler
({
    date: new Date(),
    startTime: new Date("2013/11/27 07:00 AM"),
    endTime: new Date("2013/11/27 06:00 PM"),
    height: "600",
    selectable: true,
    views: [
        "day",
        { type: "workWeek", selected: true },
        "week",
        "month",
        "agenda"
    ],

    editable: {
        template: kendo.template($("#schedulerTemplate").html())
    },
    dataSource: _dataSourceDetailedAppointmentScheduler,
    edit: _api.onEditScheduler,
    cancel: _api.onCancelScheduler,
    save: _api.onSaveScheduler,

    resources: [
        {
            field: "CommertialRepresentativeId", // The field of the scheduler event which contains the resource identifier
            title: "Representante Comercial", // The label displayed in the scheduler edit form for this resource
            dataSource: [
                {
                    text: "Representante 1", // Text of the resource instance
                    value: 1, // Identifier of the resource instance, use that value to assign an event to this instance.
                    color: "#ff0000" // Used as the background of events assigned to this resource.
                },
            ],
            multiple: false // Indicate the this is a multiple instance resource
        }
    ]

});

And after another control is modified, I try to replace the resources dataSource, changing the color of events with a value of 1 in the field: "CommertialRepresentativeId" to green.

_dataSourceDetailedAppointmentScheduler.read();
var schedulerControl = $("#scheduler").data("kendoScheduler");
//Construir
var resourceDS = new kendo.data.DataSource(
    {
        data: [
            { text: "rep 1",
                value: 1,
                color: "#00ff00"
            }
        ]
    }

);
resourceDS.read();

schedulerControl.resources[0].dataSource = resourceDS;
schedulerControl.view(schedulerControl.view().name);

Can't seem to figure out why the scheduler will continue to display the events in the original color.

I'd appreciate some help!

Answer 1

You should use resource.setDatasource or resource.dataSource.data() to update the configuration:

var data = [{ text: "rep 1", value: 1, color: "#00ff00" }];
schedulerControl.resources[0].dataSource.data(data);

If you don't want to replace all data but only change one item, this should also work:

// id if you have one, otherwise dataSource.at(index) if you know the index
var existingItem = schedulerControl.resources[0].dataSource.get(id);
existingItem.set("color", "#00ff00");

Answer 2

Changing the resources will not automatically update the UI. Therefore, you will need to refresh it manually. This can be achieved by selecting the current view via the Scheduler view method.

http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods-view

scheduler.view("month");

Answer 3

Guys you can check the following complete demo for editing resources and refreshing the UI:

• Scheduler: Resources editing using Grid nested inside custom edit template