Can't get keyboard to work for RadDatepicker

[Christopher Bodnar]

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

 

[Iana Tsolova]

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.

[Christopher Bodnar]

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

[Iana Tsolova]

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.

[Christopher Bodnar]

Hi,

That did the trick!  Thanks for your help.

Chris

[Gordon Doherty]

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.

[Iana Tsolova]

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.