spinning wait cursor duing create/update

7 posts, 0 answers
  1. Bruce
    Bruce avatar
    6 posts
    Member since:
    Nov 2010

    Posted 13 Oct 2016 Link to this post

    I have an operation in the MVC controller that might run a few seconds before completing for Create and Update actions in the grid.  How do I get a spinning wait cursor to display during this operation and prevent the user from clicking on anything else?
  2.
  3. Pavlina
    Admin
    Pavlina avatar
    6162 posts

    Posted 17 Oct 2016 Link to this post

    Hello,

    To show a progress indicator during update you can try attaching handler for the Save event as shown below:
    .Events(event=>event.Save("onSave"))
        ....
      
    <script type="text/javascript">
        function onSave(e) {
            kendo.ui.progress(e.container, true);
        }
    </script>

    You can also refer to this dojo example: http://dojo.telerik.com/OGetu in order to see how the suggested approach works for inline edit and let me know if this is the desired result.

    Regards,
    Pavlina
    Telerik by Progress
    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
  5. Bruce
    Bruce avatar
    6 posts
    Member since:
    Nov 2010

    Posted 17 Oct 2016 in reply to Pavlina Link to this post

    Works perfectly!
  7. Bruce
    Bruce avatar
    6 posts
    Member since:
    Nov 2010

    Posted 18 Oct 2016 Link to this post

    How do I make this work when removing an item from the grid.
    @(Html.Kendo().Grid<Models.JobCollection>()
                .Name("JobCollectionGrid")
       ....
    .Events(events => events.Save("OnJobCollectionSave").Remove("OnJobCollectionDelete"))
     
       ....
    function OnJobCollectionDelete(e) {
           //???? What container do I need. How do I get it? 
           //????e.container is not defined for this event. 
            var container = $("#JobCollectionGrid");
            kendo.ui.progress(container, true);
             
        }

     

     

  8.
  9. Pavlina
    Admin
    Pavlina avatar
    6162 posts

    Posted 20 Oct 2016 Link to this post

    Hello,

    The progress bar is not shown when using the same approach on remove event because the container is the row and it no longer exists. Therefore you need to show the progress icon over the grid and hide it after a while. In the link below you can find a sample dojo example that demonstrates the suggested approach.
    http://dojo.telerik.com/IPAPO

    Give it a try and let me know if you need additional assistance.

    Regards,
    Pavlina
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  11. Bruce
    Bruce avatar
    6 posts
    Member since:
    Nov 2010

    Posted 26 Oct 2016 in reply to Pavlina Link to this post

    I tried this and the progress bar does not stay up while in the controller action. I can see the grid flash immediately, then after the controller action completes I see the grid flash again.

    function OnJobCollectionDelete(e) {
            var container = $("#JobCollectionGrid");
            kendo.ui.progress(container, true);
             
        }
  13. Pavlina
    Admin
    Pavlina avatar
    6162 posts

    Posted 28 Oct 2016 Link to this post

    Hi,

    Did you see the dojo example I provided in the previous post? There you can see that showing the cursor over the container as you did on save event will not work for remove and you should show and hide the progress bar manually over the whole grid. Please follow this approach in your project and you should be able to achieve the desired result. 

    Regards,
    Pavlina
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top