This is a migrated thread and some comments may be shown as answers.

Can't get keyboard to work for RadDatepicker

6 Answers 200 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Christopher Bodnar
Top achievements
Rank 1
Christopher Bodnar asked on 18 Jan 2010, 04:36 PM
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

 

6 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 21 Jan 2010, 01:33 PM
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.
0
Christopher Bodnar
Top achievements
Rank 1
answered on 21 Jan 2010, 01:45 PM
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
0
Iana Tsolova
Telerik team
answered on 22 Jan 2010, 02:56 PM
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.
0
Christopher Bodnar
Top achievements
Rank 1
answered on 25 Jan 2010, 03:16 PM
Hi,

That did the trick!  Thanks for your help.

Chris
0
Gordon Doherty
Top achievements
Rank 1
answered on 15 Apr 2010, 12:03 PM
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.
0
Iana Tsolova
Telerik team
answered on 19 Apr 2010, 12:58 PM
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.
Tags
Calendar
Asked by
Christopher Bodnar
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Christopher Bodnar
Top achievements
Rank 1
Gordon Doherty
Top achievements
Rank 1
Share this question
or