How to Handle Focus and Blur Events for RadButton

4 posts, 0 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    Oct 2012

    Posted 27 Feb 2013 Link to this post

    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?
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 27 Feb 2013 Link to this post

    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
  3. DevCraft R3 2016 release webinar banner
  4. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 01 Mar 2013 Link to this post

    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.');
    //            });

    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
    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.
  5. Mark
    Mark avatar
    3 posts
    Member since:
    Oct 2012

    Posted 04 Mar 2013 Link to this post

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