This is a migrated thread and some comments may be shown as answers.

Custom RadProgressArea JS Error

9 Answers 76 Views
ProgressArea
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 15 Apr 2013, 01:42 PM
I'm trying to use the RadProgressArea to show the progress of inserting records into a database but am getting a javascript error which is causing the RadProgressArea fields on subsequent requests to not be updated.  

I am using a Master page and have the buttons inside a RadPanel bar and am using AJAX thru the RadAjaxManager.  I am using the current version of the RadControls (v.2013.1.403.40).

Steps to reproduce the error.
1. Click on Step 1
2. RadProgressArea fields update successfully
3. Wait for progress to finish - JS Error appears after process Completes
4. Click on Step 1 again (RadProgressArea still shows 100% complete)

Function RadUploadSafariPoller
}else{try{document.execCommand("Stop");
}catch(a){window.location.href=window.location.href;
}}return;
}}}}var d=typeof(rawProgressData)!="undefined"&&rawProgressData.OperationComplete&&rawProgressData.OperationComplete.toLowerCase()=="true";
var b=(typeof(rawProgressData)!="undefined")?rawProgressData.InProgress:true;
if(d){this._stopAsyncPolling();
Uncaught TypeError: Object #<Object> has no method '_stopAsyncPolling' Default.aspx:38
RadUploadSafariPoller._handleCallback Default.aspx:38
(anonymous function) Default.aspx:8
RadUploadSafariPoller._sendXmlHttpRequest Default.aspx:16
RadUploadSafariPoller._makeCallback
return;
}if(!b){if(this._failureCounter){this._failureCounter++;
}if(this._failureCounter>10){this._stopAsyncPolling();
this._failureCounter=1;
return;
}}if(this._disposed||d){return;
}if(!this._isInAsyncUpload&&d){return;

Master Page - Nothing in .cs
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" >
        </telerik:RadSkinManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeOut="600">
        </telerik:RadScriptManager>
 
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
         
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar1" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
 
     <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
            <Items>
                <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true" >
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <asp:Button ID="btnStep1" runat="server" Text="Step 1" onclick="btnStep1_Click" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true" >
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <asp:Button ID="btnStep2" runat="server" Text="Step 2" onclick="btnStep2_Click"/>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
 
        <telerik:radprogressmanager id="RadProgressManager1" runat="server" />
        <telerik:radprogressarea id="RadProgressArea1" runat="server" displaycancelbutton="False" CssClass="center">
            <ProgressTemplate>
                <div class="rpaInner">
                        <div class="rpaHeader">
                            <strong>Total Progress</strong>
                        </div>
                        <div class="rpaBody">
                            <dl>
                                <dt class="rpaStatFirst">Total Progress Percent</dt>
                                <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                <dt>Total Progress:</dt>
                                <dd><span runat="server" id="PrimaryValue"></span></dd>
                                <dt>Insert Count:</dt>
                                <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                <dt>Time Elapsed:</dt>
                                <dd><span runat="server" id="TimeElapsed"></span></dd>
                            </dl>
                        </div>
                    </div>           
            </ProgressTemplate>
        </telerik:radprogressarea>
</asp:Content>

Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    private void DoSomething(int LoopNum)
    {
        RadProgressContext context = RadProgressContext.Current;
        context.PrimaryValue = 0;
        context.PrimaryPercent = 0;
        context.OperationComplete = false;
 
        context.PrimaryTotal = LoopNum;
        for (int i = 1; i <= LoopNum; i++)
        {
            context.PrimaryValue = i.ToString();
            context.PrimaryPercent = Math.Round((decimal)i / LoopNum * 100, 1).ToString();
            if (!Response.IsClientConnected)
            {
                //Cancel button was clicked or the browser was closed, so stop processing
                break;
            }
 
            System.Threading.Thread.Sleep(100);
        }
        context.PrimaryValue = LoopNum;
        context.PrimaryPercent = 100;
        context.CurrentOperationText = "Complete";
        context.OperationComplete = true;
    }
 
    protected void btnStep1_Click(object sender, EventArgs e)
    {
        DoSomething(100);
    }
    protected void btnStep2_Click(object sender, EventArgs e)
    {
        DoSomething(300);
    }
}


Thanks,
Greg

9 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 18 Apr 2013, 01:21 PM
Hi Greg,

When RadProgressArea is updated from RadAjaxManager and if RadProgressManager exists on the page it also should be updated by the RadAjaxManager:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                <telerik:AjaxUpdatedControl ControlID="RadProgressManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>


All the best,
Hristo Valyavicharski
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Greg
Top achievements
Rank 1
answered on 18 Apr 2013, 01:54 PM
I have added the RadProgressManager to the RadAjaxManager and am still getting the same results.

I also upgraded to the new version (v.2013.1.417.40) and that didn't help either.
0
Hristo Valyavicharski
Telerik team
answered on 23 Apr 2013, 02:14 PM
Hi Greg,

I researched this behavior more detailed and I found that it is a development issue reproducible only in Chrome. It is caused by RadProgressManager. I have logged it into our internal system and soon it will be resolved. As for a workaround, you may try to replace RadAjaxManager with Update Panel as a temporary solution:

<asp:UpdatePanel>
      <ContentTemplate>
              <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
              <Items>
                  <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true">
                      <Items>
                          <telerik:RadPanelItem>
                              <ItemTemplate>
                                  <asp:Button ID="btnStep1" runat="server" Text="Step 1" OnClick="btnStep1_Click" />
                              </ItemTemplate>
                          </telerik:RadPanelItem>
                      </Items>
                  </telerik:RadPanelItem>
                  <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true">
                      <Items>
                          <telerik:RadPanelItem>
                              <ItemTemplate>
                                  <asp:Button ID="btnStep2" runat="server" Text="Step 2" OnClick="btnStep2_Click" />
                              </ItemTemplate>
                          </telerik:RadPanelItem>
                      </Items>
                  </telerik:RadPanelItem>
              </Items>
          </telerik:RadPanelBar>
 
          <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
          <telerik:RadProgressArea ID="RadProgressArea1" runat="server" DisplayCancelButton="False" CssClass="center">
              <ProgressTemplate>
                  <div class="rpaInner">
                      <div class="rpaHeader">
                          <strong>Total Progress</strong>
                      </div>
                      <div class="rpaBody">
                          <dl>
                              <dt class="rpaStatFirst">Total Progress Percent</dt>
                              <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                              <dt>Total Progress:</dt>
                              <dd><span runat="server" id="PrimaryValue"></span></dd>
                              <dt>Insert Count:</dt>
                              <dd><span runat="server" id="PrimaryTotal"></span></dd>
                              <dt>Time Elapsed:</dt>
                              <dd><span runat="server" id="TimeElapsed"></span></dd>
                          </dl>
                      </div>
                  </div>
              </ProgressTemplate>
          </telerik:RadProgressArea>
      </ContentTemplate>
  </asp:UpdatePanel>


Kind regards,
Hristo Valyavicharski
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Travis Lamkin
Top achievements
Rank 1
answered on 17 Jun 2013, 08:13 PM
Is there any update on this issue?  We are experiencing the same issue in Chrome.  Our version is 2013.1.417.40.
0
Kate
Telerik team
answered on 18 Jun 2013, 02:28 PM
Hi Travis,

We have already fixed the issue that you are referring to. By using the latest release of the RadControls (Q2 2013) you should not be experiencing any issues. Please give it a try and let us know how it goes. 

Regards,
Kate
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Jay
Top achievements
Rank 1
answered on 18 Oct 2013, 05:31 PM
I'm unable to upgrade that this time in our design cycle, but I'm unclear how the update panel is used for the work around?
Please explain.
0
Kate
Telerik team
answered on 22 Oct 2013, 02:48 PM
Hello Jay,

Did you try replacing the RadAjaxManager with a simple Update Panel as my colleague described in the post of 23-Apr-2013? How did this go?

Regards,
Kate
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
ناصر
Top achievements
Rank 1
answered on 22 Apr 2015, 10:34 PM

[quote]Greg said:I'm trying to use the RadProgressArea to show the progress of inserting records into a database but am getting a javascript error which is causing the RadProgressArea fields on subsequent requests to not be updated.  

I am using a Master page and have the buttons inside a RadPanel bar and am using AJAX thru the RadAjaxManager.  I am using the current version of the RadControls (v.2013.1.403.40).

Steps to reproduce the error.
1. Click on Step 1
2. RadProgressArea fields update successfully
3. Wait for progress to finish - JS Error appears after process Completes
4. Click on Step 1 again (RadProgressArea still shows 100% complete)

Function RadUploadSafariPoller
}else{try{document.execCommand("Stop");
}catch(a){window.location.href=window.location.href;
}}return;
}}}}var d=typeof(rawProgressData)!="undefined"&&rawProgressData.OperationComplete&&rawProgressData.OperationComplete.toLowerCase()=="true";
var b=(typeof(rawProgressData)!="undefined")?rawProgressData.InProgress:true;
if(d){this._stopAsyncPolling();
Uncaught TypeError: Object #<Object> has no method '_stopAsyncPolling' Default.aspx:38
RadUploadSafariPoller._handleCallback Default.aspx:38
(anonymous function) Default.aspx:8
RadUploadSafariPoller._sendXmlHttpRequest Default.aspx:16
RadUploadSafariPoller._makeCallback
return;
}if(!b){if(this._failureCounter){this._failureCounter++;
}if(this._failureCounter>10){this._stopAsyncPolling();
this._failureCounter=1;
return;
}}if(this._disposed||d){return;
}if(!this._isInAsyncUpload&&d){return;

Master Page - Nothing in .cs
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" >
        </telerik:RadSkinManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeOut="600">
        </telerik:RadScriptManager>
 
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
         
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar1" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
 
     <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
            <Items>
                <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true" >
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <asp:Button ID="btnStep1" runat="server" Text="Step 1" onclick="btnStep1_Click" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true" >
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <asp:Button ID="btnStep2" runat="server" Text="Step 2" onclick="btnStep2_Click"/>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
 
        <telerik:radprogressmanager id="RadProgressManager1" runat="server" />
        <telerik:radprogressarea id="RadProgressArea1" runat="server" displaycancelbutton="False" CssClass="center">
            <ProgressTemplate>
                <div class="rpaInner">
                        <div class="rpaHeader">
                            <strong>Total Progress</strong>
                        </div>
                        <div class="rpaBody">
                            <dl>
                                <dt class="rpaStatFirst">Total Progress Percent</dt>
                                <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                <dt>Total Progress:</dt>
                                <dd><span runat="server" id="PrimaryValue"></span></dd>
                                <dt>Insert Count:</dt>
                                <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                <dt>Time Elapsed:</dt>
                                <dd><span runat="server" id="TimeElapsed"></span></dd>
                            </dl>
                        </div>
                    </div>           
            </ProgressTemplate>
        </telerik:radprogressarea>
</asp:Content>

Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    private void DoSomething(int LoopNum)
    {
        RadProgressContext context = RadProgressContext.Current;
        context.PrimaryValue = 0;
        context.PrimaryPercent = 0;
        context.OperationComplete = false;
 
        context.PrimaryTotal = LoopNum;
        for (int i = 1; i <= LoopNum; i++)
        {
            context.PrimaryValue = i.ToString();
            context.PrimaryPercent = Math.Round((decimal)i / LoopNum * 100, 1).ToString();
            if (!Response.IsClientConnected)
            {
                //Cancel button was clicked or the browser was closed, so stop processing
                break;
            }
 
            System.Threading.Thread.Sleep(100);
        }
        context.PrimaryValue = LoopNum;
        context.PrimaryPercent = 100;
        context.CurrentOperationText = "Complete";
        context.OperationComplete = true;
    }
 
    protected void btnStep1_Click(object sender, EventArgs e)
    {
        DoSomething(100);
    }
    protected void btnStep2_Click(object sender, EventArgs e)
    {
        DoSomething(300);
    }
}


Thanks,
Greg
[/quote]

Hristo Valyavicharski

the Telerik team
0
Hristo Valyavicharski
Telerik team
answered on 27 Apr 2015, 07:52 PM
Hi,

What version do you have?  The provided version seems to be working. Look at this video:
http://screencast.com/t/GsGd7CAiE

Regards,
Hristo Valyavicharski
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
ProgressArea
Asked by
Greg
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Greg
Top achievements
Rank 1
Travis Lamkin
Top achievements
Rank 1
Kate
Telerik team
Jay
Top achievements
Rank 1
ناصر
Top achievements
Rank 1
Share this question
or