Updatepanel's Updateprogress not displaying on load

Question

I'm populating a large amount of data into an Asp.net repeater control. I need to implement a "loading" message until the data loads. I'm trying an Updatepanel/Updateprogress combo, but so far, the UpdateProgress text doesn't display.

Here's my code. The Repeater control builds and loads a jquery datatable:

<div style="clear:both;padding-top:15px;">
<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate >
   Please wait ...
</ProgressTemplate>
 </asp:UpdateProgress>     

 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate>                                          
  <asp:Repeater runat="server" ID="rptGrid">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="Grid">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Location</th>
                </tr>
            </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tr class='nondraft'>
            <td><%# Eval("EmployeeName") %></td>
            <td><%# Eval("Location")%></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
        </table>
    </FooterTemplate>
    </ContentTemplate>                                 
 </asp:UpdatePanel>
 </div>

Any idea what I'm doing wrong? Thanks

Answer 1

This is because you have not added asynchronous post back to your code. You can add that code after

</ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="IdName" EventName="YourEventName" />
    </Triggers>
</asp:UpdatePanel> 

You need to write control id ie your control on which you need to show your update progress Like Button.

Answer 2

If I am understanding it properly, you want to show the loading message when the page is loading for the first time.

In that case the UpdateProgress will not be of any help. The UpdateProgress will only show when an Async postback arises from within the Update Panel.

One way will be to load the repeater data using ajax. So the page will be practically empty when loaded first time, with the loading message. Then you make a ajax call to get the data

I vaguely remember other hacks like using iframe or may be doing a force __doPostBack from javascript or doing redirect from javascript.

Answer 3

You should instead use modal popup extender to display "Please Wait...." message until your repeater is loading. In your case since there is no actual postback happening the Update Progress can not be triggered. You can visit http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co for client side code to open and close popup.

But if you want to use update progress anyways then do the following:

1) Add a button within you update panel and make it hidden.

<asp:Button ID="YourButton" runat="server" Visible="false" />

2) Add the following javascript code:

function Update_UpdatePaanel() 
{
    document.getElementById('<%= YourButton.ClientID %>').click();
}

Hope this helps.