locked
AjaxControlToolkit - CalendarExtender keyboard control RRS feed

  • Question

  • User-3263549 posted

    Hello,

    This is an accessibility issue:

    I have a CalendarExtender control on my page aspx. The CalendarExtender appears when a textbox receives focus via the tab key as it should. But I cannot seem to access the calendar via the keyboard; pressing tab again while calendar is available switches to next textbox on form and calendar disappears. How can I set focus to calendar so that my users can make calendar selections with the keyboard?

    Thank you,
    Burton

    Thursday, October 3, 2013 11:28 AM

Answers

  • User670679149 posted

    Code you .aspx like this, it will work:

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadDatePicker ID="txtClaimantDOI"  runat="server" Skin="Office2007"
        <DateInput onkeydown="_txtClaimantDOI_OnKeyDown(event)"
            <ClientEvents OnFocus="_txtClaimantDOI_OnFocus" /> 
        </DateInput> 
    </telerik:RadDatePicker> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script language="javascript" type="text/javascript"
    //<![CDATA[
    function _txtClaimantDOI_OnFocus(sender, args)
    {
        sender.get_owner().showPopup();
    }
    function _txtClaimantDOI_OnKeyDown(e)
    {
        if (e.keyCode == 9)
        {
            $find("<%= txtClaimantDOI.ClientID %>").hidePopup();
        }
    }
    //]]> 
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 4, 2013 12:11 AM

All replies

  • Thursday, October 3, 2013 11:46 PM
  • User670679149 posted

    Code you .aspx like this, it will work:

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadDatePicker ID="txtClaimantDOI"  runat="server" Skin="Office2007"
        <DateInput onkeydown="_txtClaimantDOI_OnKeyDown(event)"
            <ClientEvents OnFocus="_txtClaimantDOI_OnFocus" /> 
        </DateInput> 
    </telerik:RadDatePicker> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script language="javascript" type="text/javascript"
    //<![CDATA[
    function _txtClaimantDOI_OnFocus(sender, args)
    {
        sender.get_owner().showPopup();
    }
    function _txtClaimantDOI_OnKeyDown(e)
    {
        if (e.keyCode == 9)
        {
            $find("<%= txtClaimantDOI.ClientID %>").hidePopup();
        }
    }
    //]]> 
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 4, 2013 12:11 AM