Kendo UI Web Scheduler - Modifying resources dataSource dynamically

javascript, kendo-datasource, kendo-scheduler, kendo-ui, scheduler

Solution

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");

Problem

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!

Original source