spinning wait cursor duing create/update

[Bruce]

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?

[Pavlina]

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

[Bruce]

Works perfectly!

[Bruce]

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);

    }

 

 

[Pavlina]

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

[Bruce]

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);

    }

[Pavlina]

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