Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UpdateProgress not working for button which is in inside of trigger property

     <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.

like image 433
Singaravelan Avatar asked Mar 20 '23 10:03

Singaravelan


2 Answers

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...

like image 135
Mayank Pathak Avatar answered Apr 26 '23 21:04

Mayank Pathak


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>
like image 23
Singaravelan Avatar answered Apr 26 '23 22:04

Singaravelan