Scheduler resources are not reactive

[Joel]

Hello,

I have been working with the Vue bindings for the Scheduler, and I ran into an issue with the scheduler resources not reacting properly to state changes. I believe this is a bug. It should be noted that this issue does not occur with the top-level scheduler data source. It reacts properly to async loading. Here's the issue:

 

Setting `:resources` to a static array of values (via state or getter) causes the scheduler to render correctly when grouping by that resource.

Example: 

/* resources */
[{
   field: "personId",
   title: "Person",
   name: "Person",
   dataSource: this.$store.getters["schedule/scheduleResources"] //assume static array (below)
 }];

/* static "schedule/scheduleResources"
[
  { value: 1, text: "John" },
  { value: 2, text: "Paul" }
]
*/

 

Setting `:resources` to an async generated array of values (via state or getter) causes the scheduler to render nothing when grouping by that resource, even when the state/getter is updated and re-evaluated.

Example:

Same as above, except the getter returns a state value that is initialized to an empty array and on created we call something like this to load the data. Once the data has been loaded, the expected behavior is that the Scheduler will update to reflect the new resources.

this.$store.dispatch("schedule/loadScheduleResources");

 

Workaround

I have been able to get around this by using a `kendo.data.DataSource` and setting a `read` function that manually dispatches the async fetch and returns the result. This delays the rendering of the scheduler until the resources are available. That looks like this:

/* resources */
[{
  field: "personId",
  title: "Person",
  name: "Person",
  batch: true,
  dataSource: new kendo.data.DataSource({
    transport: {
      read: options => {
        this.$store
          .dispatch("schedule/loadScheduleResources")
          .then(data => {
            let result = this.$store.getters["schedule/scheduleResources"]; //now have data populated
            options.success(result || []);
          });
      }
    }
  })
}];

 

I have included a minimal example to illustrate the issue. By default, the incorrect behavior is used. To switch to the workaround showing correct behavior, just look at `KendoSchedule.vue` and comment out the lines in `createPersonResource()`

 

 

[Plamen]

Hello,

Yes indeed - it seems like not yet implemented feature of the Kendo Vue Scheduler. I have created an issue about it here. 

Thank you for your concern with Kendo components.

Regards,
Plamen
Progress Telerik