<asp:UpdatePanel ID="Upnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table width="100%"><tr>
<td align="center" colspan="3">
<asp:Button ID="btnShowReport" runat="server" CssClass="ButtonClassLong" SkinID="LargeButton"
Text="Show Report" OnClick="btnShowReport_Click" TabIndex="15" />
<asp:Button ID="btnClear" runat="server" CssClass="ButtonClass" Text="Clear" OnClick="btn_Click"
TabIndex="16" />
<asp:Button ID="btnClose" runat="server" CssClass="ButtonClass" OnClick="btnClose_Click"
Text="Close" CausesValidation="False" TabIndex="17" />
<asp:CheckBox ID="ChkPrint" Text="Print View" runat="server" TabIndex="14" />
</td>
</tr>
</table></ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnShowReport" />
</Triggers></asp:UpdatePanel><asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="~/App_Themes/RIBO/Images/Progress.gif" AlternateText="Processing"
runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
This is my coding , My issue is when i click the clear button the update progress working well, when i click btnShowReport it wont work.
how to show the update progress for button click event which is in inside the trigger property.
Problem is AssociatedUpdatePanelID
. You havn't set Associateid of your 'UpdateProgress`
set it on UpdateProgress
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="Upnl1">
As per MSDN
The UpdateProgress control renders a element that is displayed or hidden depending on whether an associated UpdatePanel control has caused an asynchronous postback. For initial page rendering and for synchronous postbacks, the UpdateProgress control is not displayed.
EDIT:
Reason is <asp:PostBackTrigger ControlID="btnShowReport" />
Which will cause a full page postback. You should change your Trigger
to
<asp:AsyncPostBackTrigger ControlID="btnShowReport" />
and it will do the job for you...If you could have read the quoted statement you would have able to solve it by yourself too...
This is working for me, I hope this will helpful for some
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Show Loading Image while uploading images using updatepanel</title>
<style type="text/css">
.overlay
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
</style>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%= UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:200px">
<asp:FileUpload ID="uploadfiles1" runat="server" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" onclick="btnUpload_Click" OnClientClick="showProgress()" /><br />
<asp:Label ID="lblMsg" runat="server"/>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt="" src="loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With