Can't get keyboard to work for RadDatepicker

7 posts, 0 answers
  1. Christopher Bodnar
    Christopher Bodnar avatar
    7 posts
    Member since:
    Sep 2009

    Posted 18 Jan 2010 Link to this post

    Hi,

    I am trying to get keyboard access to work with the calendar popup with the RadDatePicker.  When I tab to the calendar button and hit enter, the calendar pops up as expected, but further tabbing just moves the focus to the next control on the page.  The arrow keys don't work either.  I see in the documentation that this should work.  Am I doing something wrong?  Here is my code:

     

    <telerik:RadDatePicker ID="dtpAutoCloseDate" style="font-size:100%"

     

     

    ToolTip="Auto-Close Date (MM/DD/YYYY)" runat="server"

     

     

    onselecteddatechanged="RadDatePicker1_SelectedDateChanged"

     

     

    Culture="English (United States)" Calendar-EnableNavigation="true" >

     

     

     

    <DateInput runat="server">

     

     

    <ClientEvents OnError="DateTimeError" />

     

     

    </DateInput>

     

     

    <Calendar runat="server" ></Calendar>

     

     

    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>

     

     

    </telerik:RadDatePicker>

    Thank you,

    Chris

     

  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 21 Jan 2010 Link to this post

    Hello Christopher,

    I am afraid that arrow key navigation is not supported for RadCalendar. You can use the [TAB] or [SHIFT+TAB] keys to navigate through a calendar days and buttons only.
    On the other hand the arrow key can be used for navigation in the RadDatePicker, RadDateTimePicker, RadTimePicker input area.

    Please review this help topic for more information on RadCalendar keyboard support.
     
    Best wishes,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Christopher Bodnar
    Christopher Bodnar avatar
    7 posts
    Member since:
    Sep 2009

    Posted 21 Jan 2010 Link to this post

    The problem is that I can't even get the the tab to work within the calendar control to change days or months.  After activating the calendar, tabbing just moves the focus to the next control on the page, it does not move focus within the calendar.  We are required to make the page keyboard only accessible.

    Chris
  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 22 Jan 2010 Link to this post

    Hi Christopher,

    Could you please try handling the picker OnPopupOpening client-side event as below and let me know if it works for you:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
    function PopupOpening(sender, eventArgs) {
        var calendar = eventArgs.get_popupControl();
        setTimeout(function() { calendar.get_element().focus(); }, 100);
    }
    </script>
    </telerik:RadCodeBlock>
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">            
        <ClientEvents OnPopupOpening="PopupOpening" />            
    </telerik:RadDatePicker>


    All the best,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Christopher Bodnar
    Christopher Bodnar avatar
    7 posts
    Member since:
    Sep 2009

    Posted 25 Jan 2010 Link to this post

    Hi,

    That did the trick!  Thanks for your help.

    Chris
  6. Gordon Doherty
    Gordon Doherty avatar
    6 posts
    Member since:
    Jan 2010

    Posted 15 Apr 2010 Link to this post

    Hi,

    This solution works in ie7, but not in firefox 3.5.3. Even in ie7, the tabbing works as desired until you tab past the calendar, but then it doesn't continue onto the next field, instead going back to the first tabstop at the top of the page.

    Can you advise on a cross-browser solution to this?

    Thanks in advance.
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 19 Apr 2010 Link to this post

    Hi Gordon,

    Coulod you please check if modifying the code as below works for you:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript">
        function PopupOpening(sender, eventArgs) {
            var calendar = eventArgs.get_popupControl();
            if ($telerik.isFirefox) {
                setTimeout(function() { $get(sender.get_id() + "_calendar_FNP").focus(); }, 100);
            }
            else {
                setTimeout(function() { calendar.get_element().focus(); }, 100);
            }
        }
    </script
    </telerik:RadCodeBlock
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">             
        <ClientEvents OnPopupOpening="PopupOpening" />             
    </telerik:RadDatePicker>


    All the best,
    Iana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top