ASP.NET - multiple ajax updateprogress not working

Asked By asif hameed on 28-Jun-12 08:25 AM

I have an asp.net page with three ajax updatepanels. in each panel there are some controls and each updatepanel as an ajax update progress control. first updatepanel has a dropdown which has autopostback = true. second and third updatepanels has this dropdown as asynpostback trigger. When I change selection in dropdown, only first updateprogress loading image appears while others don't appear.

How can I fix it ?

Vikram Singh Saini replied to asif hameed on 28-Jun-12 08:53 AM
Associate each update progress with respective ajax update panel by using http://msdn.microsoft.com/en-us/library/system.web.ui.updateprogress.associatedupdatepanelid.aspx property of UpdateProgress as:

<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server" AssociatedUpdatePanelID="upModal">
        <ProgressTemplate>
          <div style="text-align: center;">
            <img src="Images/telerik.gif" style="vertical-align: middle" alt="Processing" /><br />
            Processing ...
          </div>
        </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upModal" runat="server">
        <ContentTemplate>         
        </ContentTemplate>
</asp:UpdatePanel>

Now whenever server side tasks would take long time in processing, each update panel's associated updateprogress would be visible.
bharti odedra replied to asif hameed on 28-Jun-12 08:56 AM

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdateProgress control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdateProgress runat="server" id="PageUpdateProgress">
            <ProgressTemplate>
                Loading...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel runat="server" id="Panel">
            <ContentTemplate>
                <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
The following method should be added to your CodeBehind file: 

protected void UpdateButton_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}
Vikram Singh Saini replied to asif hameed on 28-Jun-12 10:21 AM
When I change selection in dropdown, only first updateprogress loading image appears while others don't appear.

How can I fix it ?

UpdateProgress appears when the processing takes longer than usual. If processing happens in seconds, the UpdateProgress would not be visible or appears.

I think there would be no mistake in your code. You are performing some task on first dropdownlist selection change. And that task is taking lot of time. Therefore UpdateProgress is visible.

Second reason could be that other two dropdownlist might be not executing server side code. So I would recommend to set their AutoPostback to true also. Else they would not be able to execute any server side code. And so no updateprogress visible.

Let us know the action result.