Set Focus to Dock Title

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 26 May 2011 Link to this post

    In order to be 508 compliant, I have a RadDock with a TitlebarTemplate so that the title can be marked up as an h2.  Another 508 requirement is that when the dock is refreshed (using a button at the bottom of the dock), focus is set to the dock's title.  I haven't yet been able to achieve this, and was hoping somebody might be able to lend a hand.

    ASPX:

    <telerik:RadDock runat="server" ID="rdDock" DefaultCommands="None" EnableDrag="false">
        <TitlebarTemplate>
            <h2 runat="server" id="hTitle" class="rdTitle" tabindex="0">Dock Title</h2>
        </TitlebarTemplate>
        <ContentTemplate>
            <!-- Dock Content -->
            <!-- ... -->
                                              
            <!-- Refresh Button -->
            <asp:Button runat="server" ID="btnRefresh" Text="Refresh" />
        </ContentTemplate>
    </telerik:RadDock>                        

    VB:
    Protected Sub btnRefresh_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRefresh.Click
        'Section 508 requires that focus is returned to the control
        'rdDock.TitlebarContainer.Controls(0).Focus()
        'rdDock.TitlebarContainer.Focus()
        hTitle.Focus()
    End Sub

    Please let me know if you have any thoughts on this.  Thanks!
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 May 2011 Link to this post

    Hello Ryan,

    First of all you need to set runat="server" to the <h2/> tag to be able to reference it in the code behind. Secondly, the Focus method will not work, because ASP.NET by default focuses only elements that "can be focused", such as links (<a/>) inputs, buttons, textareas and etc. In other words you can't use the Focus method to focus an <h2/>.
    You can always work around this by registering a custom script from the server, that will focus the title for you. The following line will do exactly that. Simply place it in the Button's click handler:
    ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "focusHead", String.Format("document.getElementById('{0}').focus();", hTitle.ClientID), true)


    Greetings,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 26 May 2011 Link to this post

    Thanks for the reply!  I must have deleted runat="server" when I put the code here, sorry about that.  Also, I've found that the focus() method (in JavaScript, at least) works if you set the tabindex="0", but perhaps ASP.NET doesn't operate the same way, as you've mentioned.

    I just tried your suggestion, and it works!  Thank you for you quick and accurate response!
Back to Top