Scheduler MVC Custom Editor Submit Once

2 posts, 0 answers
  1. ICT
    ICT avatar
    6 posts
    Member since:
    Oct 2017

    Posted 20 Jan 2018 Link to this post

    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

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 24 Jan 2018 Link to this post

    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:


    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top