Display Loading Panel during Export

[Richard]

When the user clicks the Export Button, I want an ajax loading panel to display over the Panel.  Then, when the export is complete I'd like the loading panel to close.

Using the OnAjaxRequestStart I am able to fire the loading panel.  For the export to work, I have to set the EnableAjax = false.  The problem is that when that is set, the OnResponseEnd is never fired.

Here's what I have so far.  Any help would be appreciated:

//Script
  <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        function RequestStart(sender, args) {
            currentLoadingPanel = $find("RadAjaxLoadingPanel1");
            switch (args.get_eventTarget()) {
                case "btnExcel":
                case "btnWord":
                case "btnCSV":
                    //Disable Ajax
                    args.EnableAjax = false;
                    currentUpdatedControl = "Panel1";
                    //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);
                    break;
            }
        }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
   </script>

//RadAjaxManager Configuration
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnExcel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnWord">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnCSV">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager>

[Daniel]

Hello Richard,

Instead of RadAjaxLoadingPanel I recommend you use RadProgressArea. For more information please examine the following links:
Using RadProgressArea
Custom Progress Monitoring

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Clive Hoggar]

Hi Daniel
It is not obvious how the progressArea gets triggered.
I added progress manager and progressarea below the grid but it is never triggered.
Can you give me some more clues?
Thanks
Clive 

[Clive Hoggar]

Hi Daniel
It is not obvious how the progressArea gets triggered.
I added progress manager and progressarea below the grid but it is never triggered.
Can you give me some more clues?
Thanks
Clive 

[Daniel]

Hello Clive,

I attached a runnable demo to this post.

Hope this helps.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Clive Hoggar]

Hi Daniel

This works great and gives a slick feel. 

I have two refinement questions:

1 ) How can I reduce the size of, or remove, the header bar (silver in default skin) which

takes up real estate but has no info in it.

2 ) How can I remove the <li> image bullets?
(or change the image from the site skin setting, which does not match the ProgressArea bgcolor)

I tried this style below already but it do not affect it the result. 

.RadProgressArea LI
{
    list-style-image: none !important;
    list-style: none !important;
}

Thanks for your help

Clive

     

[Daniel]

Hello Clive,

1) Use CSS snippet as shown below:

<style type="text/css">
    div.RadUploadProgressArea_Default .ruProgress
    {
        background-image: none;
        padding: 10px 0 0;
    }
</style>

2) I suggest you different approach:

div.RadUploadProgressArea_Default .ruProgress li
{
   ...
}

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Clive Hoggar]

Thanks Daniel

Implemented - and works perfectly!

Clive

[Paul J]

I'm getting the following error:

An unhandled exception of type 'System.StackOverflowException' occurred in mscorlib.dll

debugging, it stops on:

 context = RadProgressContext.Current

line of the Page_PreRenderComplete method. Any idea why it's doing this? I'm exporting the radGrid's content (data only) to excel upon a button press. I run some formatting code on _ExcelExportCellFormatting

here's the full Page_PreRenderComplete method:

    Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete

        If rgMembers.MasterTableView.Items.Count > 100 Then

            Dim context As RadProgressContext
            context = RadProgressContext.Current
            'context.CurrentOperationText = "Sending to client..."
            'context("ProgressDone") = True
            context.OperationComplete = True

            MyBase.OnPreRenderComplete(e)
        End If
    End Sub

any ideas?

[Brian Dobberteen]

Paul,

The problem lies in the way you are implementing the OnPreRenderComplete event handler... The way you have it causes an infinite loop - when execution gets to MyBase.OnPreRenderComplete, it fires the event handler in your page again and again and again...

To rectify this make it look like:

Private Overrides Sub OnPreRenderComplete(ByVal e As System.EventArgs)
    If rgMembers.MasterTableView.Items.Count > 100 Then
        Dim context As RadProgressContext
        'context = RadProgressContext.Current
        'context.CurrentOperationText = "Sending to client..."
        'context("ProgressDone") = True
        context.OperationComplete = True

        MyBase.OnPreRenderComplete(e)
    End If
End Sub

[Paul J]

Brian, commenting out  the line:

context = RadProgressContext.Current   

does in fact keep the application from hitting that error, but now the progress indicator never displays on screen.


Also, even if I do get this to work, I noticed in the demo that the progress indicator remains on screen even after the file prompt box pops up. isn't there anyway at all to hide the progress indicator from the screen after the progress has finished?

I realized the response stream is ended once the file prompt box appears, but can't the client side fire off an event upon response end somehow?

I feel like I've seen other sites fire events after serving up a file for a user to open/save.....

I'd be satisfied with even just showing a loading graphic on screen if I could get it to hide after the file is ready to open/save....

[Daniel]

Hello Paul,

Unfortunately there is no easy way to hide the loading panel. You can either use a Close/Finish button to refresh the page after the file is exported or you can hide the panel with javascript code after a given timeout.

Regards,
Daniel
the Telerik team