Visual que for button getting focus via Javascript

2 posts, 0 answers
  1. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 14 Mar 2013 Link to this post

    I have a aspx page that has a series of radTextBoxes. The behavior should be as follows: user enters a value, tabs to next control. If the user tabs again without entering any data, the focus should go to a button. I have the javascript that does this but there isn't any visual que to tell the user the button has focus. How do I get the visual que to show much like tabbing into a button where it changes color.

    function SetFocSubmit(objTextCtrl) {
        if (objTextCtrl.value == "") {
            document.getElementById("btnCheckCodes_input").focus();
        }
    }

    If I use the $find method I get the yellow screen of death.

    System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
    function SetFocSubmit(objTextCtrl) {
        if (objTextCtrl.value == "") {
            var btn = $find('<%= btnCheckCodes.clientID %>');
            btn.focus();
        }
    }

    If I use an asp:button and run this, the button will give a visual que that it has the focus
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Mar 2013 Link to this post

    Hi Dennis,

    There is an issue with the tabbing navigation of the RadButton as well as the triggering of the click when the button is focused and enter key is pressed. These issues are logged here and here, so that you can monitor, comment or vote on them.

    For the time being you can workaround the tabbing navigation issue by setting tabIndex 0 to the span wrapper of the input element of RadButton. For example:
    <script type="text/javascript">
        function pageLoad() {
            //Getting the button's wrapper
            button1 = $find("<%=RadButton1.ClientID %>");
            buttonWrapper = $telerik.$(button1.get_element());
      
            //Set tabindex attribute to the span element
            buttonWrapper.attr("tabindex", "0");
        }
    </script>

    The good news is that our developers are currently working on fixing them, so that if everything is fine the fixes will be resolved within the upcoming Q1 2013 SP1, which is scheduled for the beginning of April.

    Regarding the exception System.Web.HttpException, note that it is thrown because you have a server code block in the markup. You can simply prevent this error message by using the RadCodeBlock. For example:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function SetFocSubmit(objTextCtrl) {
                if (objTextCtrl.value == "") {
                    var btn = $find('<%= btnCheckCodes.clientID %>');
                    btn.focus();
                }
            }
        </script>
    </telerik:RadCodeBlock>

    More information on this matter is available in RadCodeBlock and RadScriptBlock help article.

    Regards,
    Danail Vasilev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top