I have a radbutton on the right side of the page. When I click on it a vertical scroll bar briefly pops up and then the clientclicked function is called. The problem is that when I click on the right side of the image button the clientclicked function does not get called. When I click on the left it functions as planned. It seems the vertical scroll is forcing the button to move to the left putting the right side of the button out of range of the click.
here is a piece of code and attached are screenshots.
here is a piece of code and attached are screenshots.
<telerik:RadButton ID=
"SettingsButton"
runat=
"server"
OnClientClicked=
"rWinSettingsOpen"
AutoPostBack=
"false"
Width=
"28"
Height=
"28"
BackColor=
"#25a0da"
>
<Image ImageUrl=
"~/images/settings.png"
EnableImageButton=
"true"
/>
</telerik:RadButton>
6 Answers, 1 is accepted
0
Hi Fred,
I wasn't able to reproduce the mentioned issue with the client click event of RadButton. You can watch the short video test and then tell me what I am missing.
Could you please try to reproduce the problem with the attached VS example and then tell me if I am missing something? Could you also ensure that you are using the latest official Telerik UI version - 2014.2.724?
Regards,
Danail Vasilev
Telerik
I wasn't able to reproduce the mentioned issue with the client click event of RadButton. You can watch the short video test and then tell me what I am missing.
Could you please try to reproduce the problem with the attached VS example and then tell me if I am missing something? Could you also ensure that you are using the latest official Telerik UI version - 2014.2.724?
Regards,
Danail Vasilev
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.
0
Fred
Top achievements
Rank 1
answered on 27 Aug 2014, 02:05 PM
here is skeleton of my code and it does have the problem. wait how can I attach a zip?
​
​
main.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
rel
=
"Stylesheet"
type
=
"text/css"
href
=
"Styles/Position.css"
/>
<
style
type
=
"text/css"
>
html, body, form
{
height: 100%;
padding: 0px;
margin: 0px;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
>
</
asp:ScriptReference
>
</
Scripts
>
</
telerik:RadScriptManager
>
<
script
type
=
"text/javascript"
src
=
"JSLib/Common.js"
> </
script
>
<
script
type
=
"text/javascript"
>
function rWinSettingsOpen() {
radopen("\\Settings\\Settings.aspx", "rWinSettings");
}
function rWinSettings_OnClientClose(sender, args) {
if (args) {
if (args.get_argument()) {
alert(args.get_argument());
}
}
}
</
script
>
<
telerik:RadFormDecorator
ID
=
"FormDecorator1"
runat
=
"server"
DecoratedControls
=
"all"
DecorationZoneID
=
"hr-zone"
></
telerik:RadFormDecorator
>
<
div
id
=
"hr-zone"
style
=
"padding: 0px; margin-bottom: 0px; height:inherit"
>
<
div
id
=
"divLeft"
>
<
telerik:RadBinaryImage
ID
=
"imgTreenoLogo"
runat
=
"server"
Height
=
"58"
Width
=
"121"
ImageUrl
=
"images/TreenoHR.PNG"
/>
</
div
>
<
div
id
=
"divRight2ndRow"
class
=
"clear_right"
>
<
div
id
=
"divGlobalSearch"
class
=
"float_right"
>
<
telerik:RadButton
ID
=
"SettingsButton"
runat
=
"server"
OnClientClicked
=
"rWinSettingsOpen"
AutoPostBack
=
"false"
Width
=
"28"
Height
=
"28"
BackColor
=
"#25a0da"
>
<
Image
ImageUrl
=
"~/images/settings.png"
EnableImageButton
=
"true"
/>
</
telerik:RadButton
>
</
div
>
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
MultiPageID
=
"RadMultiPage1"
runat
=
"server"
SelectedIndex
=
"0"
ScrollPosition
=
"0"
ScrollButtonsPosition
=
"Middle"
ScrollChildren
=
"true"
PerTabScrolling
=
"true"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Dashboard"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Org Chart"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Employee Information"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Tasks"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Workflow"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Documents"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Reports"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
runat
=
"server"
SelectedIndex
=
"0"
OnPageViewCreated
=
"RadMultiPage1_PageViewCreated"
>
<
telerik:RadPageView
ID
=
"RadPageView_Dashboard"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
ViewStateMode
=
"Disabled"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Org_Chart"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Employee_Information"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Tasks"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Workflow"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Documents"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView_Reports"
runat
=
"server"
ContentUrl
=
"~/Dashboard.aspx"
Height
=
"100%"
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
</
div
>
</
div
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
MinimizeZoneID
=
"RadDockZone2"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"rWinSettings"
runat
=
"server"
NavigateUrl
=
"~/Settings/Settings.aspx"
Skin
=
"Black"
Behaviors
=
"Resize, Close, Move"
Top
=
"30px"
Left
=
"0px"
VisibleStatusbar
=
"false"
OnClientClose
=
"rWinSettings_OnClientClose"
Modal
=
"true"
VisibleOnPageLoad
=
"false"
Animation
=
"Resize"
/>
</
Windows
>
</
telerik:RadWindowManager
>
</
form
>
<
script
type
=
"text/javascript"
>
function ResizeRadMultipage() {
var height = $(window).height();
var width = $(window).width();
var heightRadTabStrip1 = $("#RadTabStrip1").height();
var heightLogo = $("#imgTreenoLogo").height();
var multiPage = $find('<%=RadMultiPage1.ClientID %>');
var multiPageHeight = height - heightLogo - heightRadTabStrip1-13;
multiPage.get_element().style.height = multiPageHeight + "px";
var settingsPage = $find('<%=rWinSettings.ClientID %>');
settingsPage._height = multiPageHeight + "px";
settingsPage._width = width + "px";
}
$(window).bind('resize', ResizeRadMultipage);
function pageLoad() {
var $ = $telerik.$;
ResizeRadMultipage();
}
function clickTab(selIndex, UserID) {
__doPostBack("OrgChart", UserID);
}
</
script
>
</
body
>
</
html
>
dashboard.aspx and setting.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dashboard.aspx.cs" Inherits="Dashboard" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
rel
=
"Stylesheet"
type
=
"text/css"
href
=
"Styles/Position.css"
/>
<
link
rel
=
"Stylesheet"
type
=
"text/css"
href
=
"Styles/NoGridLines.css"
/>
<
style
type
=
"text/css"
>
html, body, form
{
height: 100%;
padding: 0px;
margin: 0px;
}
.padding1
{
padding:0px 1px 0px 1px /*top right bottom left*/
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
</
form
>
</
body
>
</
html
>
0
Hi Fred,
I have tried to reproduce the issue with the provided VS example and Telerik UI 2014.2.724 in FireFox browser but to no avail - the click event once again works properly on my side. You can watch the short video test on this regard in the attached archive. The VS example is also attached in the other archive.
Can you confirm that there aren't any JavaScript errors that could prevent script controls from properly working on the page? If there are such errors they must be found and fixed. Can you also ensure that you are using the latest official Telerik UI version - 2014.2.724?
As for attaching archives this is only possible in support tickets and not forum threads.
If you are still having issues on this regard I can suggest that you either open a support ticket and sent us a small fully runnable mockup of the problem or paste below the piece of code that illustrates the issue.
Regards,
Danail Vasilev
Telerik
I have tried to reproduce the issue with the provided VS example and Telerik UI 2014.2.724 in FireFox browser but to no avail - the click event once again works properly on my side. You can watch the short video test on this regard in the attached archive. The VS example is also attached in the other archive.
Can you confirm that there aren't any JavaScript errors that could prevent script controls from properly working on the page? If there are such errors they must be found and fixed. Can you also ensure that you are using the latest official Telerik UI version - 2014.2.724?
As for attaching archives this is only possible in support tickets and not forum threads.
If you are still having issues on this regard I can suggest that you either open a support ticket and sent us a small fully runnable mockup of the problem or paste below the piece of code that illustrates the issue.
Regards,
Danail Vasilev
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.
0
Fred
Top achievements
Rank 1
answered on 29 Aug 2014, 12:35 PM
I would suggest when you test you use Internet Explorer (which has over half the market, chrome being next, firefox has lost most of its share so I would reconsider ever testing with it). I'm using IE 11 on windows 8.1. From the screen shots I sent you can clearly see that as I click on the radbutton a scroll comes up on the right pushing the button, which is right aligned, to the left momentarily. it would seem therefore that the scroll moving the button to the left is the problem.
0
Fred
Top achievements
Rank 1
answered on 29 Aug 2014, 01:00 PM
I am using v.2014.2.724.45. I tried it with chrome and it works fine but still the majority of users are IE. in IE there is a javascript error:
​Exception was thrown at line 1283, column 6034 in http://localhost:61102/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:5924cf72-83cf-477d-98eb-a608a92942c5:ea597d4b:b25378d2;Telerik.Web.UI:en-US:6915a8c2-c063-435a-ab31-d2d2285652a6:16e4e7cd:f7645509:22a6274a:86526ba7:874f8ea2:ed16cbdc:88144a7a:24ee1bba:11a04f7e:f46195d3:6d43f6d9:4c8be21a:650fdad:d40f7d5c:e91ff703:7666c7ed:29e4ab07:a51ee93e:59462f1:58366029:e330518b:2003d0b8:c128760b:1e771326:c8618e41:e4f8f289:1a73651d:333f8d94:92fe8ea0:fa31b949:19620875:490a9d4e:bd8f85e4:b7778d6c
0x800a139e - JavaScript runtime error: SyntaxError
​Exception was thrown at line 1283, column 6034 in http://localhost:61102/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:5924cf72-83cf-477d-98eb-a608a92942c5:ea597d4b:b25378d2;Telerik.Web.UI:en-US:6915a8c2-c063-435a-ab31-d2d2285652a6:16e4e7cd:f7645509:22a6274a:86526ba7:874f8ea2:ed16cbdc:88144a7a:24ee1bba:11a04f7e:f46195d3:6d43f6d9:4c8be21a:650fdad:d40f7d5c:e91ff703:7666c7ed:29e4ab07:a51ee93e:59462f1:58366029:e330518b:2003d0b8:c128760b:1e771326:c8618e41:e4f8f289:1a73651d:333f8d94:92fe8ea0:fa31b949:19620875:490a9d4e:bd8f85e4:b7778d6c
0x800a139e - JavaScript runtime error: SyntaxError
0
Hello Fred,
I am still unable to reproduce the problem after opening the page under IE11. You can find the video test in the attached archive.
Note that I want to help you and provide a solution if possible but I must initially reproduce the problem locally. That is why I have asked to send us a small project that illustrates the issue.
From the provided code snippet it seems that there is a "Common.js" script file and "Position.css" style file which may be the problem of the mentioned issue. Does removing these files fixes the issue? If that is so and the problem is in the javascript file you can debug and fix it. If, however, the problem is in the style file you can start turning one by one the styles until you detect and fix the problematic rule. More details on the matter is available in the Distorted Appearance help article.
Regards,
Danail Vasilev
Telerik
I am still unable to reproduce the problem after opening the page under IE11. You can find the video test in the attached archive.
Note that I want to help you and provide a solution if possible but I must initially reproduce the problem locally. That is why I have asked to send us a small project that illustrates the issue.
From the provided code snippet it seems that there is a "Common.js" script file and "Position.css" style file which may be the problem of the mentioned issue. Does removing these files fixes the issue? If that is so and the problem is in the javascript file you can debug and fix it. If, however, the problem is in the style file you can start turning one by one the styles until you detect and fix the problematic rule. More details on the matter is available in the Distorted Appearance help article.
Regards,
Danail Vasilev
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.