Show/Hide loading panel without AjaxManager

[Dean]

Currently trying to show and hide a loading panel on a button that exports a grid using AjaxExportManager. I have it so the panel will show on the button click and once it has been exported, I use the property "OnClientPdfExported" to call a function that hides my loading panel.

It works for a single time and when I press export once again, my loading panel doesn't appear. Any idea why?

I do not wish to use  <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" /> beceause I'm on a content page and I only have access to the proxy manager. I had it working with the proxy manager but my case requires me to avoid it.

[Dean]

Just to clarify, the problem occurs after I've exported successfully with a loading panel displayed. It is the button clicks afterwards that do not work until I refresh the page.

[Marin Bratanov]

Hello Eric,

I'd recommend looking for JavaScript errors thrown by the code. Also, since you are using the client-side export we provide, you must ensure the button does not do a postback.

RadAjaxLoadingPanel exposes the show(DomElementId) and hide(DomElementId) methods and they do not require a RadAjaxManager, you can hook them to any event, you only need to make sure to provide the same element reference both times.

Here's a basic example I made for you that seems to work as expected for me, so you can use it as comparison base (of course, it can be refactored to have better code quality):

<telerik:RadAjaxLoadingPanel runat="server" ID="ralp1" Skin="Black"></telerik:RadAjaxLoadingPanel>

<telerik:RadClientExportManager runat="server" ID="rcem1" OnClientPdfExported="hidePanel">
</telerik:RadClientExportManager>

<div id="exportContainer">
    <asp:Button Text="export" ID="btn1" OnClientClick="getPdf();return false;" runat="server" />
    <br />
    some more content for the export
</div>

<telerik:RadCodeBlock runat="server" ID="rcb1">
    <script>
        function getPdf() {
            showPanel();
            setTimeout(function () {
                $find("<%=rcem1.ClientID%>").exportPDF($telerik.$("#exportContainer"));
            }, 1000);//simulate large content exporting that takes time so we can actually see the loading panel
        }
        var elemId = "exportContainer";
        function showPanel() {
            getLoadingPanel().show(elemId);
        }
        function hidePanel() {
            getLoadingPanel().hide(elemId);
        }
        function getLoadingPanel() {
            return $find("<%=ralp1.ClientID%>");
        }
    </script>
</telerik:RadCodeBlock>

Regards,
Marin Bratanov
Progress Telerik

[Dean]

Thanks for the code! Unfortunately revising my code with something similar to yours did not work successfully. I have the same problem on the next consecutive clicks where it will export without a loading panel.

How would I ensure the button does not do a postback?

Right now the only imperfect solution I can find is using this:

var manager = $find("<%=RadAjaxManager.GetCurrent(Page).ClientID%>");
manager.ajaxRequestWithTarget("<%=btnExport.UniqueID%>", "");

 

However it's not ideal as when I first click the button, the page does not indicate any loading and it's only until the export completes that I see a brief loading panel. I am confused because when I use debugger it seems to go through the showPanel() function correctly.

[Marin Bratanov]

Hi Eric,

The <asp:Button> renders as an <input type="submit" /> by default, so clicking it will post the form to the server. TO avoid this, you must prevent the click from propagating, and the easiest way to do that is to return false from the client-side click event like in my example. I highlighted that in green:

<asp:Button Text="export" ID="btn1" OnClientClick="getPdf();return false;" runat="server" />

You must not invoke a request through the RadAjaxManager, because RadClientExportManager operates entirely in the browser, so you must not dispose the page while its export is running.

Regards,
Marin Bratanov
Progress Telerik

[Ebizz]

Please clarify it I want deep knowledge in this matter.

[Rumen]

Hi Ebizz,

RadClientExportManager is built on top of the Kendo UI Drawing API which is a client-side widget and works on the client side only. That's why the button should not submit the page and Marin shows how to prevent the page submission by setting return false after the getPdf method execution: 

<asp:Button Text="export" ID="btn1" OnClientClick="getPdf();return false;" runat="server" />

Regards,
Rumen
Progress Telerik