0

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>
2
Contributors
8
Replies
9
Views
6 Years
Discussion Span
Last Post by router.exe
0

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

0

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

0

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

0

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?

0

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);

        }
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.