javascript - Kendo UI Web Scheduler - Modifying resources dataSource dynamically - Stack Overflow

admin管理员组

文章数量:1404602

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!

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!

• javascript
• kendo-ui
• scheduler
• kendo-scheduler
• kendo-datasource

Share Improve this question Follow edited Dec 18, 2013 at 22:33 Lars Höppner 18.4k22 gold badges4747 silver badges7373 bronze badges asked Dec 18, 2013 at 22:08 Gustavo GuevaraGustavo Guevara 15933 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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./kendo-ui/api/javascript/ui/scheduler#methods-view

scheduler.view("month");

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

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

本文标签： javascriptKendo UI Web SchedulerModifying resources dataSource dynamicallyStack Overflow