How to Handle Focus and Blur Events for RadButton

[Mark]

I want to call a javascript function when a radButton receives focus by tabbing onto the control.  Similarly, call a javascript function when radButton loses focus.  How can this be accomplished?

[MasterChiefMasterChef]

Hi Mark,

The built-in events for the RadButton are right here in the RadButton documentation. The closest events available for what you are trying to do are the OnClientMouseOver and OnClientMouseOut events.  Unfortunately, these events do not check for focus or blur. In your code behind you could set the focus manually to a specific RadButton (example here), and use the document.activeElement selector to select the focused item. I'm not quite sure if there is an equivalent selector available to select a blurred element.

Hopefully this helps,
Master Chief

[Danail Vasilev]

Hi Guys,

RadButton is rendered as an input element wrapped inside of a span element. Therefore in order to tab in the button you can set its tabindex property. After that you can simply use the jQuery's focus and  blur methods to attach handlers to these events. 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");

            //Add event handler to focus event
            buttonWrapper.focus(function () {
                alert('Handler for .focus() called.');
            });

            //Add event handler to focus event
//            buttonWrapper.blur(function () {
//                alert('Handler for .blur() called.');
//            });
        }
    </script>

Note that I set the tabindex attribute of the span to 0 through JavaScript, as the tabIndex property of the RadButton does not get "0" as a value. This is an issue which our developers are aware of and will consider a fix.


All the best,
Danail Vasilev
the Telerik team

[Mark]

Thanks for the replies.  By acquiring the element I'm able to implement the needed behaviors.