Radbutton not always triggering client event

7 posts, 0 answers
  1. Fred
    Fred avatar
    53 posts
    Member since:
    Aug 2011

    Posted 22 Aug 2014 Link to this post

    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>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fred
    Fred avatar
    53 posts
    Member since:
    Aug 2011

    Posted 27 Aug 2014 Link to this post

    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>
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 29 Aug 2014 Link to this post

    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.

     
  6. Fred
    Fred avatar
    53 posts
    Member since:
    Aug 2011

    Posted 29 Aug 2014 in reply to Danail Vasilev Link to this post

    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.
  7. Fred
    Fred avatar
    53 posts
    Member since:
    Aug 2011

    Posted 29 Aug 2014 Link to this post

    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
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 01 Sep 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017