This is a migrated thread and some comments may be shown as answers.

Scheduler resources are not reactive

1 Answer 44 Views
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Joel asked on 05 Jul 2018, 09:49 PM

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()`

 

 

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 09 Jul 2018, 12:48 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Joel
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or