Showing Loading Spinner on Scehduler

[Yannick]

Hi,

We are building a vue application and we are also using the scheduler component.
We are having hard time to find a the way to show the loading animation while we are fetching data from our server

We found multiple example online for the jquery lib using kendo.ui.progress(el, true/false) but not sure how to apply this to our vue app.

Thanks in advance for your help

[Dimitar]

Hi Yannick,

In general, when the Scheduler component is bound to remote data, a loading spinner is automatically being displayed over the widget content while the data is loading. Check out the following example where you can observe this behavior:

• https://www.telerik.com/kendo-vue-ui/components/scheduler/data-binding/#toc-binding-to-remote-data-services

In case you would like to manually show the loaders during an update, for example, you could use the requestStart and requestEnd events of the DataSource:

<kendo-schedulerdatasource ref="remoteDataSource"
  ...
  @requestStart="onRequestStart"
  @requestEnd="onRequestEnd">
</kendo-schedulerdatasource>

new Vue({
    el: "#vueapp",
    methods: {
        onRequestStart: function(e) {
          var scheduler = this.$refs.scheduler.kendoWidget();
          if (e.type == "update") {
              window.kendo.ui.progress(scheduler.element.find(".k-scheduler-content"), true);
          }
        },
        onRequestEnd: function(e) {
          var scheduler = this.$refs.scheduler.kendoWidget();
          if (e.type == "update") {
              window.kendo.ui.progress(scheduler.element.find(".k-scheduler-content"), false);
          }
        }
    }
})

Regards,
Dimitar
Progress Telerik

[Yannick]

Hi Dimitar,

Thanks for the answer. This totally make sense to me. however it doesn't work.
I don't have any issues in the code or nothing is crashing but i cant see any loading spinner.

Is it possible that is coming from those warning?
See attached files

[Dimitar]

Hi Yannick,

I will need additional information in order to troubleshoot the scenario and continue my investigation. That being said, could you send an isolated example where the described issue can be reproduced? You could use the following StackBlitz example as a starting point:

• https://stackblitz.com/edit/f38umh

Regards,
Dimitar
Progress Telerik