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

spinning wait cursor duing create/update

6 Answers 521 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bruce
Top achievements
Rank 1
Bruce asked on 13 Oct 2016, 04:54 PM
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?

6 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 17 Oct 2016, 09:14 AM
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
0
Bruce
Top achievements
Rank 1
answered on 17 Oct 2016, 02:25 PM
Works perfectly!
0
Bruce
Top achievements
Rank 1
answered on 18 Oct 2016, 02:40 PM
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);
         
    }

 

 

0
Pavlina
Telerik team
answered on 20 Oct 2016, 06:16 AM
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.
0
Bruce
Top achievements
Rank 1
answered on 26 Oct 2016, 03:03 PM

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);
         
    }
0
Pavlina
Telerik team
answered on 28 Oct 2016, 10:36 AM
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.
Tags
Grid
Asked by
Bruce
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Bruce
Top achievements
Rank 1
Share this question
or