New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Navigation

Navigation between dates with the arrow keys
December 2024
December 2024
 SMTWTFS
4824252627282930
491234567
50891011121314
5115161718192021
5222232425262728
532930311234



  • Demo Configurator
  • Command keyCtrl

This example demonstrates the navigation between dates with the arrow keys into the ASP.NET AJAX Calendar and RadDatePicker controls. The navigation could be enabled with setting the EnableKeyboardNavigation property to true:

<telerik:RadCalendar EnableKeyboardNavigation="true" EnableMultiSelect="false" runat="server" ID="RadCalendar1" />

When the EnableKeyboardNavigation is set to true the user could navigate with:

  • Left arrow - moves one date left form the current date
  • Right arrow - moves one date right from the current date
  • Top arrow - moves one week before the current date
  • Bottom arrow - moves one week after the current date

If the user presses the Enter key or spacebar key the date will be selected.
Note that the EnableMultyDateSelecttion property of the calendar should be set to false.

By default you can use Ctrl + Y to focus the control. With R3 2021 you can now focus the RadCalendar by specifying the FocusKey and CommandKey in the KeyboardNavigationSettings inner tag.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>

    <style type="text/css">
        .image {
            margin-top: 12px;
            float: right;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg" style="max-width: 900px" runat="server" id="containerDiv">
        <asp:Image CssClass="image" ImageUrl="images/keyboard_nav.gif"
            runat="server" AlternateText="Navigation between dates with the arrow keys"></asp:Image>
        <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar1" EnableKeyboardNavigation="true"
            EnableMultiSelect="false">
        </telerik:RadCalendar>
        <br />
        <br />
        <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="RadDatePicker1">
            <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">
            </Calendar>
        </telerik:RadDatePicker>
        <br />
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script>
            function validateFocusKey(source, arguments) {
                var maskedTextBox = $find("<%= RadMaskedTextBoxFocusKey.ClientID %>");
                var textBoxValue = maskedTextBox.get_textBoxValue().trim();

                if (textBoxValue.length != 1) {
                    arguments.IsValid = false;
                    return;
                }

                var keyCode = textBoxValue.charCodeAt(0);

                if (keyCode < 65 || keyCode > 90) {
                    arguments.IsValid = false;
                    return;
                }
                arguments.IsValid = true;
            }
        </script>
    </telerik:RadScriptBlock>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">

                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListCommandKey"
                                AutoPostBack="true"
                                Width="160px"
                                Label="Command key" />
                        </li>
                        <li>
                            <qsf:MaskedTextBox runat="server" ID="RadMaskedTextBoxFocusKey"
                                ValidationGroup="FocusKeyValidator"
                                CausesValidation="true"
                                AutoPostBack="true"
                                Width="160px"
                                LabelWidth="80"
                                Mask="L"
                                Text="Y"
                                SelectionOnFocus="SelectAll"
                                Label="Focus key" />
                        </li>
                        <li>
                            <asp:CustomValidator ID="CustomValidator1" runat="server"
                                Display="Dynamic"
                                ValidationGroup="FocusKeyValidator"
                                ForeColor="Red"
                                Text="* Please type a valid uppercase Latin letter"
                                ClientValidationFunction="validateFocusKey" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance