How to refresh scheduler after resource data is updated

[Al]

I use a scheduler with grouping where it is bound to the data object 'resourceDataSource1' as below

<kendo-scheduler-resource :field="'groupLead'" :name="'Lead'" title="'Lead'" :data-source="resourceDataSource1"></kendo-scheduler-resource>

All works fine if the data is set at the time the page loads (ie. if it is set directly in the data  property), but but my case the tasks and resource info is retrieved by separate api call and hence is only set after the page loads.

So what I want to know is how can I get the scheduler to re-read the value from resourceDataSource1 once I have populated it?

 

[Al]

This looks like the same case as reported here, it appears an issue has been created but is open since 2018 - any plans to sort this out?

[Petar]

Hi Al,

Here is StackBlitz example in which the targeted functionality of setting the resources fetched from an API is demonstrated. To stimulate the API call there is the following code that applies the "fetched" resource data:

setTimeout(()=>{
this.resourceDataSource1 = [
        {
            text: "Meeting Room 101", // The text of the resource instance
            value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
            color: "#1c9ec4" // Used as the background of events assigned to this resource.
        },
        { text: "Meeting Room 102", value: 2, color: "#ff7663" }
    ];
    var scheduler = this.$refs.scheduler.kendoWidget();
    scheduler.resources[0].dataSource.data(this.resourceDataSource1);
    scheduler.view(scheduler.view().name);
},200)

The lines in yellow are used to update the resources inside the Scheduler. Talking about the fix of the linked issue, I can't say when it will be fixed. Our focus is on developing more native components. This is why I would suggest you vote for this feature request about a Native Scheduler component. Once the Native Scheduler is released there won't be a need to update the resources in a way similar to the one discussed above.  

Another approach you can try for achieving the targeted functionality is to wrap the Scheduler in a div element with a key attribute. Pass the key attribute a computed property. Every time the value of the computed property is changed, the content inside the div will be re-rendered as is demonstrated in this StackBlitz example. The sample uses a PanelBar component but the idea is the same if you put 

Let me know if you have additional questions related to the current ticket.

Regards,
Petar
Progress Telerik

[Al]

Thanks Petar, I have voted for the native control.

I'm using 'fetch' and managed to get it working as below, do you recommend using setTimeout as per your example or is nextTick ok?

fetch()  {

    //...code here to call api and set scheduler data
    //...iterate through scheduler data to populate resourceDataSource1

    this.$nextTick(function() {
        const scheduler = this.$refs.kendoscheduler.kendoWidget()
        scheduler.resources[0].dataSource.data(this.resourceDataSource1)
        scheduler.view(scheduler.view().name); 
    })
}

 

Out of interest, with nextTick I found that the group updates and scheduler displays as expected even without calling :

scheduler.view(scheduler.view().name);

[Petar]

Hi Al,

The setTimeout function is presented in the linked example just to simulate a delay similar to the one you would have when using an API. What would recommend is to call the below code in a then method after the data is fetched and assigned to the resourceDataSource1 data prop. This fetch method documentation shows how we can use the then method after the data is already on the client. Try this approach and let me know if it works in your application. If it doesn't you can keep the nextTick approach shared in your last reply. 

const scheduler = this.$refs.kendoscheduler.kendoWidget()
scheduler.resources[0].dataSource.data(this.resourceDataSource1)
scheduler.view(scheduler.view().name); 

[Al]

Thanks Petar. I was always using .then on the data fetch but I couldn't get it to work without adding the nextTick but now it seems to working fine without it so all is good.

[Petar]

I am happy to hear that everything is working as expected.