locked
Trigger UpdatePanel on page load RRS feed

  • Question

  • User323983933 posted

    I have a massive, nasty grid that takes like 2 minutes to load.

    I want to use an updatepanel and updateprogress to let the user know we are processing his request.

    I don't want to respond to a button click.  I want the "spinner" to come up by itself, and go away when the data is loaded.

    This means that the update progress is seen whenever the page data is loading, triggered by page_load, or page_init or something.

    This is my page.

        <!-- Required ScriptManager to handle the loading progress -->
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <!-- Your UpdateProgress Control -->
        <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
            <ProgressTemplate>
                Please wait...
            </ProgressTemplate>
        </asp:UpdateProgress>
    
        <asp:Label ID="Label1" runat="server" Text="Label" OnInit="Label1_Init"></asp:Label>


    This is my Codebehind.

        protected void Label1_Init(object sender, EventArgs e)
        {
            Thread.Sleep(20000);
            Label1.Text = "This too shall pass.";
        }

    What I am seeing is the updateprogress is never shown, it just waits 20 seconds and shows the end result.

    Friday, August 8, 2014 7:43 PM

All replies

  • User-1644933537 posted

    I have the following in my MasterPage's and it displays when a page is loading.

    You will have to style it and replace the images, but otherwise paste and go.

    Implement GridView paging and you will see an tremendous performance improvement in your page load.

    <div id="Progress_Update_Animation" >
    	<asp:Panel runat="server" ID="Panel_ProgressUpdate" >
    		<table width="250px" style="padding: 8px;" class="panel_gray_white round_corners_all shadow_white_gray">
    			<tr>
    				<td>
    					<table cellpadding="2px">
    						<tr>
    							<td align="left" valign="middle" style="width: 41px;" >
    								<img alt="" src="<%= Page.ResolveUrl("~")%>etc/img/loader/progress_title_icon.png" class="center" />
    							</td>
    							<td align="left" valign="middle">
    								<asp:Label ID="Label1" runat="server" Text="Processing..." ForeColor="White" Font-Names="Calibri" Font-Size="X-Large" />
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<table width="100%">
    						<tr>
    							<td class="line_gradient"></td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<table cellpadding="4px">
    						<tr>
    							<td align="left" valign="middle" style="width: 41px;" >
    								<img alt="" src="<%= Page.ResolveUrl("~")%>etc/img/loader/spinner.gif" class="center" />
    							</td>
    							<td align="left" valign="middle">
    								<asp:Label ID="Label2" runat="server" Text="Please wait" ForeColor="#B9B9B9" />
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    		</table>
    	</asp:Panel>
    	<asp:ModalPopupExtender ID="ModalPopupExtender_ProgressUpdate" runat="server"
    		DynamicServicePath="" Enabled="True"
    		PopupControlID="Panel_ProgressUpdate" 
    		TargetControlID="Panel_ProgressUpdate" 
    		BackgroundCssClass="modalPopUpBackground">
    	</asp:ModalPopupExtender>
    
    	<script language="javascript" type="text/javascript">
    		Sys.Net.WebRequestManager.add_invokingRequest(Loadpopup);
    		Sys.Net.WebRequestManager.add_completedRequest(unLoadpopup);
    		function Loadpopup(sender, args) {
    			$find('<%=ModalPopupExtender_ProgressUpdate.ClientID %>').show();
    		}
    		function unLoadpopup(sender, args) {
    			$find('<%=ModalPopupExtender_ProgressUpdate.ClientID %>').hide();
    		}
    		function pageUnload() {
    			Sys.Net.WebRequestManager.remove_invokingRequest(Loadpopup);
    			Sys.Net.WebRequestManager.remove_completedRequest(unLoadpopup);
    		}
    	</script>
    </div>

    Monday, September 15, 2014 8:53 PM