How to use the updateprogress without an updatepanel

In a project I’m currently working on, we couldn’t use an updatepanel anymore. Why? Because we need to use some third party control that doesn’t work with an updatepanel. On that page we already used a nice updateprogress and we wanted to keep that functionality because the are some time consuming functions on that page.
If you use Bing or Google you will find no real solution. But we found one. First we need to create our own updatepanel in the.ascx file:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<a href="#" style="display: none; visibility: hidden;" onclick="return false" id="dummyLink" 
    runat="server">dummy</a> 
<cc1:ModalPopupExtender ID="popUp" runat="server" TargetControlID="dummyLink" PopupControlID="pnlTstPopup" 
    BackgroundCssClass="modalBackground" BehaviorID="MyMPE"> 
</cc1:ModalPopupExtender> 
<asp:Panel ID="pnlTstPopup" runat="server" Style="display: none;" SkinID="PopUpPanel" 
    CssClass="modalpopupBusy"> 
    <div class="zorgplan_progress"> 
        <div id="parent" style="width: 100%"> 
            <div align="center" id="container"> 
                Bezig met het verwerken van gegevens. 
            </div> 
        </div> 
    </div> 
</asp:Panel>

And of course some css:

.modalpopupBusy 
{ 
    background-color: blue; 
    border-color: White; 
    border-radius: 7px; 
    position: relative; 
    border: 1px solid #ccc; 
    width: 40%; 
    height: 150px; 
} 
.modalProgress 
{ 
    background-color:aqua; 
    color: #4D4B57; 
    border-radius: 7px; 
    vertical-align: middle; 
    padding: 50px; 
    margin: 0; 
}

And here is the trick, we need some Javascript to show the popup:

function show_popup() { 
   setTimeout(function() { $find('popUp').show(); }, 1000); //Time in ms before the popup appears  
} 

And no the worst part of this solution, we need to call this js function with every action that could take some time. For example:

<asp:Button ID="cmdVerder" Text="Verder" runat="server" OnClick="cmdVerder_Click" 
    CssClass="button_verder" OnClientClick="show_popup();" />

I know this solution isn’t ideal but it works just fine.
I hope that you find this method useful.

Comments are closed.