Progress Modal on Form Submit that returns an Excel document stays displayed

[Francois]

I used the examples I could find:

<input type="submit" value="Export to Excel" name="export" id="excel" formmethod="post" class="btn-secondary searchBtn px-5" />

and then:

<script type="text/javascript">
   $(function(){
        kendo.ui.progress.messages = {
            loading: "Processing..."
        };
       function displayLoading(target) {
            var element = $(target);
            kendo.ui.progress(element, true);
            this.form.submit(function(){
                kendo.ui.progress(element, false);
            });
        }
       $("#excel").click(function(){
            displayLoading(document.body);
        });
    });
</script>

 

The problem is that the controller's action returns a file:

public ActionResult Index(...)
{
    ...
   return File(renderedBytes, mimeType, fileName); // This is an Excel file.
}

 

it looks to me that the 

kendo.ui.progress(element, false);

is never triggered, therefore the progress overlay stays displayed (and the form is disabled) even after the Excel file is returned to the browser.

How can I make the overlay disapear once the Excel file has been returned?

Thanks.

[Francois]

This is what I did (this may help someone):

@using (Html.BeginForm("Index", "PurchaseOrder", FormMethod.Post, new { @name = "poIndex", @id = "poIndex" }))
...

and then:

<script type="text/javascript">
    $(document).ready(function () {
        $("#poIndex").submit(function () {
            kendo.ui.progress($("#BusyArea"), true);
            $.ajax({
                type: "POST",
                url: "/PurchaseOrder/Index",
                data: $(this).serialize()
            })
            .always(function() { kendo.ui.progress($("#BusyArea"), false); })
            ;
        });
    });
</script>

I just wonder if this is the best way to do this?

Thanks

 

 

 

 

 

 

[Petar]

Hi Francois,

You can use the success function of the AJAX request to call the "kendo.ui.progress($("#BusyArea"), false);" line of code.

The success function is executed when the AJAX request succeeds. If we edit the code you've shared, the result should look like the following:

<script type="text/javascript">
    $(document).ready(function () {
        $("#poIndex").submit(function () {
            kendo.ui.progress($("#BusyArea"), true);
            $.ajax({
                type: "POST",
                url: "/PurchaseOrder/Index",
                data: $(this).serialize(),
                success: function(){
                    kendo.ui.progress($("#BusyArea"), false);
                }
            })
            .always(function() { kendo.ui.progress($("#BusyArea"), false); })
            ;
        });
    });
</script>

Try the suggested approach and let me know about the result. 

Regards,
Petar
Progress Telerik