I am designing a page which has some controls outside UpdatePanel and some inside updatePanel. Controls both outside and inside panel can trigger asynchronous update. When the page is partially updated by clicking controls inside panel UpdateProgress appears BUT if I click on control which is outside updatePanel, content gets update but UpdateProgress is not displayed.

 

Any clues??

 

Here is the code..when I click MoreLinkButton, Updateprogress is displayed and content gets updated. When I click CommonSearchButton, content gets updated but Updateprogress is not displayed :(

 

          <asp:Panel ID="SearchPanel" DefaultButton="CommonSearchButton" runat="server" BackColor="Honeydew">
                            <div id="Search">
                                <table id="TABLE1">
                                    <tr>
                                    <td>
                                            <asp:Button ID="CommonSearchButton" runat="server" Text="Search" CssClass="submit"
                                                OnClick="SearchSubmit"/>
                                   
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </asp:Panel>
        <br />
    </div>
    <div style="vertical-align: middle; text-align: center;">
       <asp:UpdateProgress id="UpdateMessagesProgress"  DynamicLayout="false" AssociatedUpdatePanelID="UpdateMessagePanel" runat="server" DisplayAfter="0">
                            <ProgressTemplate>
                                Loading...<img id="CategoryDropwodnUpdateProgressImg" src="Images/ajax-loader.gif" alt="" />
                            </ProgressTemplate>
                        </asp:UpdateProgress>
         </div>  
    <asp:UpdatePanel id="UpdateMessagePanel" runat="server" UpdateMode="conditional">
        <contenttemplate>
             
   <table>
    <tr>
            <td style="text-align: right; direction: ltr;">
                <asp:LinkButton ID="MoreLinkButton" runat="server" OnClick="GetMoreResults" Text="Next >>" Width="100px"></asp:LinkButton>
             
            </td>
        </tr>
        <tr>
            <td colspan="2">
   
              
                        <uctl:MessageControl ID="MessageControl1" runat="server" />
                </td>

   </tr>

</table>
    </contenttemplate>
        <triggers>
                <asp:AsyncPostBackTrigger ControlID="MoreLinkButton"  EventName="Click"/>
                 <asp:AsyncPostBackTrigger ControlID="CommonSearchButton"/>       
            </triggers>
    </asp:UpdatePanel>

I tested your codes and get the similar issue as you.There is AssociatedUpdatePanelID property for asp:UpdateProgress.If you specify a asp:UpdatePanel for asp:UpdateProgress,the specified progress bar will appear when the asp:Update is updated.
Try to remove AssociatedUpdatePanelID property of asp:UpdateProgress and it should work fine for asp:Panel and asp:UpdatePanel.
Try to change your codes as the following.
<div style="vertical-align: middle; text-align: center;">
<asp:UpdateProgress id="UpdateMessagesProgress" DynamicLayout="false" runat="server" DisplayAfter="0">
<ProgressTemplate>
Loading...<img id="CategoryDropwodnUpdateProgressImg" src="Images/ajax-loader.gif" alt="" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
Wish the above can help you.

Could any one plz help me in putting animated image in update progress:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
   
            <div style="position:absolute; left: 100px;top:10px">
                Update Panel 1 is in Progress......
            </div>
       
    </ProgressTemplate>
    </asp:UpdateProgress>

 

how should i add the animated image in the above update progress???

 

Here are some sample codes for your reference.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>

<asp:ScriptManagerProxy ID="ScriptManagerProxy" runat="server" />
<AjaxControlToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender" runat="server"
TargetControlID="UpdatePanel">
<Animations>
<OnUpdating>
<EnableAction AnimationTarget="PageContainer" Enabled="false"/>
</OnUpdating>
<OnUpdated>
<EnableAction AnimationTarget="PageContainer" Enabled="true"/>
</OnUpdated>
</Animations>
</AjaxControlToolkit:UpdatePanelAnimationExtender>
<asp:UpdateProgress ID="UpdateProgress" runat="server" DisplayAfter="0">
<ProgressTemplate>
<asp:Panel ID="UpdateProgressPanel" runat="server">
<div class="PageLink">
<div class="PageSpacer">
</div>
<div class="PageLinkHeader">
Pemrosesan
</div>
<div class="PageLinkDesc">
<center>
<asp:Image ID="CallbackUpdateProgressImage" runat="server" ImageUrl="~\images\airplane.bmp" />
</center>
</div>
<div class="PageSpacer">
</div>
</div>
</asp:Panel>
<AjaxControlToolkit:AlwaysVisibleControlExtender ID="UpdateProgressVisibilityExtender" runat="server"
TargetControlID="UpdateProgressPanel" VerticalSide="Middle" VerticalOffset="0"
HorizontalSide="Center" HorizontalOffset="0" ScrollEffectDuration=".1" />
</ProgressTemplate>
</asp:UpdateProgress>
<div class="PageContainer">
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="aLabel" runat="server">Test</asp:Label>
<asp:TextBox ID="aTextBox" runat="server"></asp:TextBox>
<asp:TextBox ID="bTextBox" runat="server"></asp:TextBox>
<asp:Button ID="aButton" runat="server" OnClick="aButton_Click" Text="TEST" />
</ContentTemplate>
</asp:UpdatePanel>
</div>

Behibd Code:
protected void aButton_Click(object sender, EventArgs e)
{
Thread.Sleep(1000);
string setFocusX = "window.setTimeout('setFocus(\"" + aTextBox.ClientID + "\");', 100, \"JavaScript\");";
ClientScript.RegisterStartupScript(this.GetType(), "setFocusX", setFocusX, true);
}
Wish the above can help you.

I had the same problem and removing associatedControlID solved the problem for me as well.
thanks a lot.
but out of curiousity, it doesn't seem to explain logically much why removeing this property would solve the problem.
is it possible for you to expose some inside of what exactly associated control id does? I assume it's some kind of safeguard to restrain the update progress panel to show up only when the AssociatedControl gets updated, so there are probably cases removing this property may cause side affects, etc..
am I right assuming that?

 thanks.
-Jason

Jasson_King:

Here are some sample codes for your reference.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>

<asp:ScriptManagerProxy ID="ScriptManagerProxy" runat="server" />
<AjaxControlToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender" runat="server"
TargetControlID="UpdatePanel">
<Animations>
<OnUpdating>
<EnableAction AnimationTarget="PageContainer" Enabled="false"/>
</OnUpdating>
<OnUpdated>
<EnableAction AnimationTarget="PageContainer" Enabled="true"/>
</OnUpdated>
</Animations>
</AjaxControlToolkit:UpdatePanelAnimationExtender>
<asp:UpdateProgress ID="UpdateProgress" runat="server" DisplayAfter="0">
<ProgressTemplate>
<asp:Panel ID="UpdateProgressPanel" runat="server">
<div class="PageLink">
<div class="PageSpacer">
</div>
<div class="PageLinkHeader">
Pemrosesan
</div>
<div class="PageLinkDesc">
<center>
<asp:Image ID="CallbackUpdateProgressImage" runat="server" ImageUrl="~\images\airplane.bmp" />
</center>
</div>
<div class="PageSpacer">
</div>
</div>
</asp:Panel>
<AjaxControlToolkit:AlwaysVisibleControlExtender ID="UpdateProgressVisibilityExtender" runat="server"
TargetControlID="UpdateProgressPanel" VerticalSide="Middle" VerticalOffset="0"
HorizontalSide="Center" HorizontalOffset="0" ScrollEffectDuration=".1" />
</ProgressTemplate>
</asp:UpdateProgress>
<div class="PageContainer">
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="aLabel" runat="server">Test</asp:Label>
<asp:TextBox ID="aTextBox" runat="server"></asp:TextBox>
<asp:TextBox ID="bTextBox" runat="server"></asp:TextBox>
<asp:Button ID="aButton" runat="server" OnClick="aButton_Click" Text="TEST" />
</ContentTemplate>
</asp:UpdatePanel>
</div>

Behibd Code:
protected void aButton_Click(object sender, EventArgs e)
{
Thread.Sleep(1000);
string setFocusX = "window.setTimeout('setFocus(\"" + aTextBox.ClientID + "\");', 100, \"JavaScript\");";
ClientScript.RegisterStartupScript(this.GetType(), "setFocusX", setFocusX, true);
}
Wish the above can help you.

Setting the AssociatedUpdatePanelID means the UpdateProgress control will only display if an async postback is caused by a control inside the UpdatePanel.  That means triggers outside of the UpdatePanel itself won't cause the UpdateProgress to display.  See http://ajax.asp.net/docs/overview/UpdateProgressOverview.aspx.

Removing AssociatedUpdatePanelID tag might be a work around but is not a solution.

Lets say if I have 3 update panels performing 3 tasks in the page.

I need to have 3 update progress controls showing different messages when the server is busy.

In this case the only way I could achieve this would be to place the trigger controls within the update panels which might not go with the page design.

Any suggestions?

Steve Marx:

Setting the AssociatedUpdatePanelID means the UpdateProgress control will only display if an async postback is caused by a control inside the UpdatePanel.  That means triggers outside of the UpdatePanel itself won't cause the UpdateProgress to display.  See http://ajax.asp.net/docs/overview/UpdateProgressOverview.aspx.

Hi Steve, I download sample and work fine :). But, when I using master page, the script block in the webform don't work. There are something that I can do?

Saludos, 

<asp:UpdateProgress ID="f1" runat="server">
    <ProgressTemplate>       
        <img src="img/indicator.gif" /> <font size="1" face="MS Sans Serif" color="black">Loading...</font>
    </ProgressTemplate>
    </asp:UpdateProgress>

Hi  Steve Marx!

 something suggestion, when I use a master page?

Saludos,

Your absolutely right sudeepghatak 

 It seems that AJAX Extensions is completely unaware of which update panel(s) is/are updating until the updates come back from the server. The only exception to this is when a child of an update panel postbacks and it is a trigger of the update panel. Then Ajax Extensions merely follows the parent references of the postback control to find which update panel it is inside.

This creates an unfortunate limitation that an UpdateProgress control either updates for every async postback or only for async postbacks of child controls of a specific update panel.

You could get around this limitation by triggering an update panel only with child controls. You could trigger the update panel from outside the panel by calling the postback method of a hidden button inside the update panel. Unfortunately, there are many situations in which this work-around does not work either.

 I hope the ASP.NET team takes notice of this problem.
 

You have to program it to display manually. Halfway down this page addresses the issue:

 http://www.asp.net/AJAX/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx