Scheduler MVC Custom Editor Submit Once

[ICT]

Hi,

 

I am using a Custom Editor Template for my Scheduler grid. When saving details of an Event is there a way of ensuring that the user does not click the Submit button multiple times? The issue is the validation operations on the server that are taking a few seconds to complete.

Is there a way to display a progress bar for any server operations that are occurring?

 

Cheers.

Phil

[Dimitar]

Hello,

You can subscribe to the DataSource's "requestStart" / "requestEnd" events to toggle the Kendo UI progress as follows:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
  .Name("scheduler")
  ...
  .DataSource(d => d
    .Model(m => {
      m.Id(f => f.TaskID);
      m.Field(f => f.Title).DefaultValue("No title");
    })
    .Read("Read", "Scheduler")
    .Create("Create", "Scheduler")
    .Destroy("Destroy", "Scheduler")
    .Update("Update", "Scheduler")
    .Events(e => e.RequestStart("onRequestStart").RequestEnd("onRequestEnd"))
  )
)

<script>
  function onRequestEnd(e) {
    var scheduler = $("#scheduler").getKendoScheduler();
    if (e.type == "update") {
      kendo.ui.progress(scheduler.element.find(".k-scheduler-content"), false);
    }
  }

  function onRequestStart(e) {
    var scheduler = $("#scheduler").getKendoScheduler();
    if (e.type == "update") {
      kendo.ui.progress(scheduler.element.find(".k-scheduler-content"), true);
    }
  }
</script>

This way, a loader will be displayed over the the Scheduler content when the update request is triggered and upon receiving a response, it will be hidden. This approach can also be used for the rest CRUD operations of the DataSource. 

For additional information about the kendo progress() method, refer to the following section of the documentation:

• kendo.ui.progress API Reference

Regards,
Dimitar
Progress Telerik