trouble with updatepanel and displaying a progress bar

Question

router.exe 0 Newbie Poster

14 Years Ago

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>

asp.net javascript

2 Contributors
8 Replies
2K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by router.exe

vuyiswamb 17 Posting Whiz

14 Years Ago

i have once written an article about this look at this

http://www.dotnetfunda.com/articles/article733-how-to-use-updateprogress-control-aspnet-ajax-.aspx

vuyiswamb 17 Posting Whiz

14 Years Ago

i wrote an article about this , look at the following

http://www.dotnetfunda.com/articles/article733-how-to-use-updateprogress-control-aspnet-ajax-.aspx

Reply to this topic

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.

router.exe 0 Newbie Poster · Answer 1 · 2010-10-27T03:24:50+00:00

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

vuyiswamb 17 Posting Whiz · Answer 2 · 2010-10-27T04:03:08+00:00

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

vuyiswamb 17 Posting Whiz · Answer 3 · 2010-10-27T04:03:36+00:00

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

router.exe 0 Newbie Poster · Answer 4 · 2010-10-27T04:32:25+00:00

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?

vuyiswamb 17 Posting Whiz · Answer 5 · 2010-10-27T12:27:30+00:00

vuyiswamb 17 Posting Whiz

14 Years Ago

can i see your code Behind?

router.exe 0 Newbie Poster · Answer 6 · 2010-10-27T23:32:31+00:00

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

        }