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

Radbutton not always triggering client event

6 Answers 122 Views
Button
This is a migrated thread and some comments may be shown as answers.
Fred
Top achievements
Rank 1
Fred asked on 22 Aug 2014, 06:25 PM
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.
<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

Sort by
0
Danail Vasilev
Telerik team
answered on 27 Aug 2014, 08:37 AM
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
 

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>
 
<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>
 
<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
Danail Vasilev
Telerik team
answered on 29 Aug 2014, 09:49 AM
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
 

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
0
Danail Vasilev
Telerik team
answered on 01 Sep 2014, 03:01 PM
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
 

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.

 
Tags
Button
Asked by
Fred
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Fred
Top achievements
Rank 1
Share this question
or