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

Display Loading Panel during Export

11 Answers 355 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 2
Richard asked on 27 May 2009, 05:02 PM

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>  
 
 

11 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 30 May 2009, 10:20 AM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 03 Oct 2009, 01:22 PM
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 
0
Clive Hoggar
Top achievements
Rank 1
answered on 03 Oct 2009, 03:50 PM
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 
0
Daniel
Telerik team
answered on 08 Oct 2009, 12:01 PM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 08 Oct 2009, 04:43 PM
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
     
0
Daniel
Telerik team
answered on 14 Oct 2009, 01:28 PM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 14 Oct 2009, 02:46 PM
Thanks Daniel
Implemented - and works perfectly!
Clive
0
Accepted
Paul J
Top achievements
Rank 1
answered on 25 May 2010, 06:57 PM
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 ObjectByVal 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?



0
Brian Dobberteen
Top achievements
Rank 1
answered on 08 Jun 2010, 05:49 PM
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 

0
Paul J
Top achievements
Rank 1
answered on 16 Jun 2010, 10:19 PM
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....
0
Daniel
Telerik team
answered on 22 Jun 2010, 12:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Richard
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Clive Hoggar
Top achievements
Rank 1
Paul J
Top achievements
Rank 1
Brian Dobberteen
Top achievements
Rank 1
Share this question
or