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

Show/Hide loading panel without AjaxManager

6 Answers 358 Views
AjaxLoadingPanel
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 23 Oct 2018, 08:33 PM

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.

6 Answers, 1 is accepted

Sort by
0
Dean
Top achievements
Rank 1
answered on 24 Oct 2018, 02:06 PM
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.
0
Accepted
Marin Bratanov
Telerik team
answered on 25 Oct 2018, 11:38 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dean
Top achievements
Rank 1
answered on 25 Oct 2018, 01:22 PM

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.

0
Marin Bratanov
Telerik team
answered on 25 Oct 2018, 02:57 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ebizz
Top achievements
Rank 1
answered on 08 May 2019, 01:44 PM
Please clarify it I want deep knowledge in this matter.
0
Rumen
Telerik team
answered on 13 May 2019, 10:49 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
AjaxLoadingPanel
Asked by
Dean
Top achievements
Rank 1
Answers by
Dean
Top achievements
Rank 1
Marin Bratanov
Telerik team
Ebizz
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or