I may have found a bug in the $telerik.getLocation method. I'm using version 2013.3.1324.10 of Telerik UI for ASP.NET AJAX. We ran into an issue in one of our applications where as a user scrolls down a page that contains an AjaxLoadingPanel, when the panel is shown it is shows further up the page than the Ajax panel it should be covering. If I scroll down the page 70px, the AjaxLoadingPanel displays exactly 70px above the panel it should be displaying over. This issue occurs in all webkit based browsers (safari & chrome).
Digging through the telerik client side source we determined that the issue stems from the $telerik.getLocation method. On our page we have 5 total forms, the first of which is hidden within model markup at the top of the page. The $telerik.getLocation method has a specific case towards the end, where it checks if the browser is Safari (really checking for webkit apparently) and if it is, it gets all the forms on the page, then it calls originalGetLocation on the first form in that list. This is where we run into problems. If that form is hidden, originalGetLocation returns a Point object with an x of 0 and y of 0. The script goes on to check if these values are less than zero, if they are it attempts to increment the x and y value of ajax panel by the scroll value of the window which is what is required in order to correctly calculate the position of an element in a webkit browser. The problem is, since originalGetLocation returns 0 for x & y, the increment never happens so as you scroll down the page telerik fails to factor in your scroll and you loading panel shows further and further above the element it should cover.
I'm not posting the telerik code because I wasn't for sure if it is allowed to add the telerik source that seems to be the problem. Our current source is currently too much to post as an example but I'll try to come up with smaller test case to illustrate the bug.
In the meantime, I've found the removing the check for whether x&y of the form is less than zero and simply incrementing the value no matter what seems to solve the issue in my particular case. Of course, I'd rather not have to override a core method of the telerik source if there is another work around.
Digging through the telerik client side source we determined that the issue stems from the $telerik.getLocation method. On our page we have 5 total forms, the first of which is hidden within model markup at the top of the page. The $telerik.getLocation method has a specific case towards the end, where it checks if the browser is Safari (really checking for webkit apparently) and if it is, it gets all the forms on the page, then it calls originalGetLocation on the first form in that list. This is where we run into problems. If that form is hidden, originalGetLocation returns a Point object with an x of 0 and y of 0. The script goes on to check if these values are less than zero, if they are it attempts to increment the x and y value of ajax panel by the scroll value of the window which is what is required in order to correctly calculate the position of an element in a webkit browser. The problem is, since originalGetLocation returns 0 for x & y, the increment never happens so as you scroll down the page telerik fails to factor in your scroll and you loading panel shows further and further above the element it should cover.
I'm not posting the telerik code because I wasn't for sure if it is allowed to add the telerik source that seems to be the problem. Our current source is currently too much to post as an example but I'll try to come up with smaller test case to illustrate the bug.
In the meantime, I've found the removing the check for whether x&y of the form is less than zero and simply incrementing the value no matter what seems to solve the issue in my particular case. Of course, I'd rather not have to override a core method of the telerik source if there is another work around.
2 Answers, 1 is accepted
0
Brian
Top achievements
Rank 1
Rank 1
answered on 18 Apr 2014, 09:56 PM
Super simple example of the above issue with the latest telerik UI libraries referenced:
masterpage:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TelerikExample.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
</head>
<body>
<div id="someModal" style="display: none;">
<form id="someForm">
<input id="name" type="text"/>
</form>
</div>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<header>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
</form>
</body>
</html>
Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikExample._Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2014.1.403.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManager ID="ramAccount" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="mainAjaxPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainAjaxPanel" LoadingPanelID="rlpLoader" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="rlpLoader" runat="server" Skin="Sitefinity"/>
<!-- Force a scroll... -->
<p style="min-height: 1000px;">
stuff
</p>
<telerik:RadAjaxPanel runat="server" ID="mainAjaxPanel">
<telerik:RadCaptcha runat="server"></telerik:RadCaptcha>
<asp:LinkButton ID="btnRefreshCaptcha" runat="server">
Refresh
</asp:LinkButton>
</telerik:RadAjaxPanel>
</asp:Content>
masterpage:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TelerikExample.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
</head>
<body>
<div id="someModal" style="display: none;">
<form id="someForm">
<input id="name" type="text"/>
</form>
</div>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<header>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
</form>
</body>
</html>
Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikExample._Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2014.1.403.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManager ID="ramAccount" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="mainAjaxPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainAjaxPanel" LoadingPanelID="rlpLoader" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="rlpLoader" runat="server" Skin="Sitefinity"/>
<!-- Force a scroll... -->
<p style="min-height: 1000px;">
stuff
</p>
<telerik:RadAjaxPanel runat="server" ID="mainAjaxPanel">
<telerik:RadCaptcha runat="server"></telerik:RadCaptcha>
<asp:LinkButton ID="btnRefreshCaptcha" runat="server">
Refresh
</asp:LinkButton>
</telerik:RadAjaxPanel>
</asp:Content>
0
Hello ,
We are aware of this issue and we have provided detailed answer for this case in the original support ticket you have opened.
Please consider posting any additional question in the support ticket so that we could better track the case.
Regards,
Maria Ilieva
Telerik
We are aware of this issue and we have provided detailed answer for this case in the original support ticket you have opened.
Please consider posting any additional question in the support ticket so that we could better track the case.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.