[Solved] Visual que for button getting focus via Javascript

[dhuss]

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

[Danail Vasilev]

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