I'm trying to display a progress bar or animation for an update panel that takes a while to load. The update panel is housing a chart that uses multiple chart areas, and the code behind is building these chart areas during the update.

I'm not sure what I'm missing using the UpdateProgress control. i know i should be adding an actual image in the progress template, but i'm holding off on that just trying to get the text to display as i have seen in some examples i have found.

sidenote* would it better to use updateprogress, or updatepanelupdateanimation extender?

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div style="float:left; width:200px;">
        <asp:TextBox ID="tbTestPassDate" runat="server" Width="150px"></asp:TextBox>
        <asp:CalendarExtender ID="tbTestPassDate_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="tbTestPassDate" PopupButtonID="bCalendar" Format="d, MMMM yyyy">
        </asp:CalendarExtender>  
        <asp:ImageButton ID="bCalendar" runat="server" 
            ImageUrl="~/Resources/Calendar_scheduleHS.png" />
    </div>
    <div style="float:left;">
        <asp:Button ID="bGo" runat="server" Text="Go" width="70px" onclick="bGo_Click"/>
    </div>
    <div style="clear:both;"></div>
    <div style="width:1024px;">
        <asp:UpdatePanel ID="ReportUpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Chart ID="RunStatsChart" runat="server" Width="1024px" Height="600px" 
                    ClientIDMode="Static" >
                </asp:Chart>                

            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="bGo" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="ReportUpdatePanel">
        <ProgressTemplate>
        loading please wait..
        </ProgressTemplate>
        </asp:UpdateProgress>
    </div>

So my code already follows the method you have shown in your article, and still nothing displays.

use this

in your the head of your page use this and again inside add an Updateprogress and add some nice gif animation for your users and an update panel and test it

function pageLoad()
    {      
      var manager = Sys.WebForms.PageRequestManager.getInstance();
       manager.add_endRequest(endRequest);
       manager.add_beginRequest(OnBeginRequest);
    }
    function OnBeginRequest(sender, args)
    {    
     $get('ParentDiv').className ='Background';   
    }
    function endRequest(sender, args)
    {
       $get('ParentDiv').className ='';
    }

add a div that covers whole contents of the page and name it ParentDiv

<div id ="ParentDiv">


        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
         <ProgressTemplate>
   
            <div id="IMGDIV" align="center" valign="middle" runat="server" style=" position: absolute;left: 46%;top: 40%;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:40;">
                      <asp:Image ID="Progress" runat="server" ImageUrl="~/Images/progress.gif" />
           </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

//your Update Panel here 

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
.....Contents 
    </ContentTemplate>
                </asp:UpdatePanel>

</div>

and tell me if you still have a problem

use this

in your the head of your page use this and again inside add an Updateprogress and add some nice gif animation for your users and an update panel and test it

function pageLoad()
    {      
      var manager = Sys.WebForms.PageRequestManager.getInstance();
       manager.add_endRequest(endRequest);
       manager.add_beginRequest(OnBeginRequest);
    }
    function OnBeginRequest(sender, args)
    {    
     $get('ParentDiv').className ='Background';   
    }
    function endRequest(sender, args)
    {
       $get('ParentDiv').className ='';
    }

add a div that covers whole contents of the page and name it ParentDiv

<div id ="ParentDiv">


        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
         <ProgressTemplate>
   
            <div id="IMGDIV" align="center" valign="middle" runat="server" style=" position: absolute;left: 46%;top: 40%;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:40;">
                      <asp:Image ID="Progress" runat="server" ImageUrl="~/Images/progress.gif" />
           </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

//your Update Panel here 

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
.....Contents 
    </ContentTemplate>
                </asp:UpdatePanel>

</div>

and tell me if you still have a problem

I still get the same result. nothing shows up. i'm starting to think my code behind is causing this.

should i be creating an empty chart on the aspx page, or should i be creating the chart with all the chart areas for a givin call in the code behind and passing it to a place holder?

can i see your code Behind?

i updated my aspx file a little bit. removed a calendar extender that was part of the ajax toolkit, thinking the toolkit script manager might be te issue, but that did not fix it. i also changed the empty chart on the aspx page to a place holder, and am using the code behind to place a loaded chart into the place holder. this also yielded me the same result.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">    
    </asp:ScriptManager>
            
    <div style="float:left; width:125px;" >    
        <asp:TextBox ID="tbTestPass" runat="server" Width="120px"></asp:TextBox>        
    </div>
    <div style="float:left;">
        <asp:Button ID="bGo" runat="server" Text="Go" width="70px" onclick="bGo_Click"/>
    </div>
    <div style="clear:both;"></div>
    <div style="width:1024px; height:auto;" id="ParentDiv">
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="ReportUpdatePanel">
            <ProgressTemplate>
                <div>
                    <img src="../Resources/activity.gif" alt="loading please wait"/>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    
        <asp:UpdatePanel ID="ReportUpdatePanel" runat="server">
            <ContentTemplate>
                <asp:PlaceHolder ID="ChartHolder" runat="server"></asp:PlaceHolder>
            </ContentTemplate>

        </asp:UpdatePanel>        
        
    </div>
    
</asp:Content>

code behind

private void assembleData(string date)
        {
            FCMWebService myFCMWebService;
            DataTable RunSchedule;
            System.Web.UI.DataVisualization.Charting.Chart RunStatsChart;
            try
            {
                // if the place holder is holding controls
                if (this.ChartHolder.Controls.Count > 0)
                {
                    this.ChartHolder.Controls.Clear();
                }

                RunStatsChart = new System.Web.UI.DataVisualization.Charting.Chart();
                RunStatsChart.Width = 640;

                myFCMWebService = new FCMWebService();
                
                DateTime d = DateTime.Parse(date);

                RunSchedule = myFCMWebService.GetRMScheduleWithPurposeByDate(d);

                int index = 0;

                foreach (DataRow dr in RunSchedule.AsEnumerable())
                {

                    DataTable dt = myFCMWebService.GetRMScheduleResultStats(int.Parse(dr["RunScheduleID"].ToString()));

                    // skip deleted schedules
                    if (dt.Rows.Count == 0)
                    {
                        continue;
                    }


                    // add chart attributes
                    RunStatsChart.Series.Add("Series" + index.ToString());
                    RunStatsChart.ChartAreas.Add("ChartArea" + index.ToString());
                    RunStatsChart.Legends.Add("Legend" + index.ToString());
                    RunStatsChart.Titles.Add("Title" + index.ToString());

                    // configure title
                    RunStatsChart.Titles[index].DockedToChartArea = "ChartArea" + index.ToString();
                    RunStatsChart.Titles[index].Docking = System.Web.UI.DataVisualization.Charting.Docking.Top;
                    RunStatsChart.Titles[index].Text = dr["Purpose"].ToString();
                    RunStatsChart.Titles[index].IsDockedInsideChartArea = false;

                    // configure chart legend
                    RunStatsChart.Legends[index].Alignment = System.Drawing.StringAlignment.Near;
                    RunStatsChart.Legends[index].DockedToChartArea = "ChartArea" + index.ToString();
                    RunStatsChart.Legends[index].Docking = System.Web.UI.DataVisualization.Charting.Docking.Bottom;
                    RunStatsChart.Legends[index].IsDockedInsideChartArea = false;
                    RunStatsChart.Legends[index].LegendStyle = System.Web.UI.DataVisualization.Charting.LegendStyle.Table;
                    RunStatsChart.Legends[index].TextWrapThreshold = 50;

                    // configure chart series
                    RunStatsChart.Series[index].ChartArea = "ChartArea" + index.ToString();
                    RunStatsChart.Series[index].Legend = "Legend" + index.ToString();
                    RunStatsChart.Series[index].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
                    RunStatsChart.Series[index]["PieLabelStyle"] = "Disabled";
                    RunStatsChart.Series[index].LegendText = "#VALX (#PERCENT)";


                    RunStatsChart.Series[index].XValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.String;
                    RunStatsChart.Series[index].YValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Int32;
                    RunStatsChart.Series[index].YValueMembers = "Count";
                    RunStatsChart.Series[index].XValueMember = "Status";
                    RunStatsChart.Series[index].Points.DataBind(dt.AsEnumerable(), "Status", "Count", "");






                    for (int x = 0; x < dt.Rows.Count; x++)
                    {
                        switch (RunStatsChart.Series[index].Points[x].AxisLabel.ToString().ToLower())
                        {
                            case "pass":
                                RunStatsChart.Series[index].Points[x].Color = System.Drawing.Color.Green;
                                break;
                            case "fail":
                                RunStatsChart.Series[index].Points[x].Color = System.Drawing.Color.Red;
                                break;
                            case "not yet assigned":
                                RunStatsChart.Series[index].Points[x].Color = System.Drawing.Color.Black;
                                break;
                            case "assigned to machine":
                                RunStatsChart.Series[index].Points[x].Color = System.Drawing.Color.Orange;
                                break;
                            case "running":
                                RunStatsChart.Series[index].Points[x].Color = System.Drawing.Color.Blue;
                                break;
                        }// switch on datapoint name
                    }// end for result names


                    index++;
                }// end foreach schedule id

                if (RunSchedule.Rows.Count % 2 == 0)
                {
                    RunStatsChart.Height = (RunSchedule.Rows.Count * 80);
                }
                else
                {
                    RunStatsChart.Height = (RunSchedule.Rows.Count * 120);
                }

                

                this.ChartHolder.Controls.Add(RunStatsChart);
                
            }
            catch (Exception ex)
            {
                
                throw ex;
            }

        }// end assembleData

        protected void bGo_Click(object sender, EventArgs e)
        {
            //assembleData(this.tbTestPassDate.Text);

        }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.