Modifying resources dataSource dynamically

[Andres]

Hi,

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!

[Andres]

So far the only solution I've found is to modify the existing datasource in the following way:

var resource = schedulerControl.resources[0].dataSource.at(0);
schedulerControl.resources[0].dataSource.remove(resource);

schedulerControl.resources[0].dataSource.add({
                    text: "Rep 1",
                    value: 1,
                    color: "#00ff00"
                });

Which doesn't seem to be very clean. Could you please point me in the right direction?

[Vladimir Iliev]

Hi Andres,

Basically modifying the scheduler resources after it's initialization is not supported out of the boxa and custom solution would be required. I would suggest to destroy the widget and re-initialize it with the new resources as current solution can lead to unexpected behavior. 

Kind Regards,
Vladimir Iliev
Telerik

[Dave]

[quote]Vladimir Iliev said:Hi Andres,

Basically modifying the scheduler resources after it's initialization is not supported out of the boxa and custom solution would be required. I would suggest to destroy the widget and re-initialize it with the new resources as current solution can lead to unexpected behavior. 

[/quote]

Does the latest version of the scheduler support dynamic resources, or Is this answer still correct? 

 

[Vladimir Iliev]

Hello Darin,

This is still the recommended approach, although it's possible to achieve it without destroying the widget using custom code (example here). 

Regards,
Vladimir Iliev
Telerik

 

 

[Su C]

I am looking for something in similar lines but I want Attendees, Projects added in my CustomEditor everything else works but these newly added fields. The data for these 2 fields will come from a different dataSources. How do I achieve it?

[Vladimir Iliev]

Hello Sujatha,

As your last question is not related to the current thread could you please open a new support ticket and elaborate more on what exactly is not working when you add the new resources? Also please provide current Scheduler and it's editor configuration that you are using. This would help us advice you better how to proceed.

Regards,
Vladimir Iliev
Telerik

 

 

[Mark]

[quote]Basically modifying the scheduler resources after it's initialization is not supported out of the boxa and custom solution would be required. I would suggest to destroy the widget and re-initialize it with the new resources as current solution can lead to unexpected behavior. [/quote]

 

Is this still the case?

[Nencho]

Hello Mark,

Yes, in order to achieve the needed scenario, you would need to destroy and recreate the scheduler widget, as my colleague had previously demonstrated with the provided dojo example:

http://dojo.telerik.com/egoq

Regards,
Nencho
Progress Telerik

[Ody]

Some of the other widgets have an .options() method to allow changing options post-initialization. Do you know if you folks have this on your to-do list, or if there is a voting ticket for it?

[Ody]

I know this isn't a precise solution for changing the *datasource* of a resource dynamically, but I did figure out how to change the resources (and grouping) dynamically.

 

In the .navigate event of the scheduler I added the following code. It uses the .setOptions method from the inherited kendo widget object. Then I call .rebind() on the scheduler.  

 

navigate: function (e) {
    if (e.action === 'changeView') {
        if (e.view === 'month') {
            this.setOptions({ resources: null, group: null });
            this.rebind();
        }
        else {
            this.setOptions({resources: [{
                field: "lineName",
                name: 'Lines',
                title: "Line",
                dataSource: [{
                    value: 'CRAB LINE 1', text: 'CRAB LINE 1', color: '#ED872D'
                }, {
                    value: 'CRAB LINE 2', text: 'CRAB LINE 2', color: '#E9692C'
                }, {
                    value: 'TRAY PACK', text: 'TRAY PACK', color: '#E5E4E2'
                }, {
                    value: 'PORTIONS', text: 'PORTIONS', color: '#EEE8AA'
                }, {
                    value: 'FRESH AREA', text: 'FRESH AREA', color: '#A1CAF1'
                }, {
                    value: 'BREADING LINE 1', text: 'BREADING LINE 1', color: '#FFDEAD'
                }, {
                    value: 'BREADING LINE 2', text: 'BREADING LINE 2', color: '#FFC87C'
                }, {
                    value: 'OVERFLOW', text: 'OVERFLOW', color: '#FFF600'
                }, {
                    value: 'SIDE LINE', text: 'SIDE LINE', color: '#FFa089'
                }, {
                    value: 'VAC PAC', text: 'VAC PAC', color: '#D3D3D3'
                }]
            }],
                group: { resources: ["Lines"], orientation: "vertical" }
            });
            this.rebind();
        }
    }
},