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

Keyboard Support

  • Demo Configurator
  • Command keyAlt

Keyboard Support

A critical requirement for software accessibility is keyboard support as a complete alternative to pointing devices (mouse, etc.).

Keyboard support is comprised of command key, focus key, and keyboard commands. RadAsyncUpload will seamlessly switch between mouse and keyboard navigation.

In order to configure keyboard support with RadAsyncUpload its KeyboardNaviagationSettings should be set: 

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" DisablePlugins="true" />
</telerik:RadAsyncUpload>

Note: When Silverlight/Flash module is used it is not possible to have a keyboard navigation. To disable them, DisablePlugins property should be set to true.

The KeyboardNavigationSettings exposes two properties to configure the keyboard combination that sets focus to the control:

  • FocusKey An upper-case letter or number.
  • CommandKey Ctrl , Alt, Shift, or any combination of two of these keys.

When there are multiple AsyncUpload controls on a given page, each of them may have a different activation combination.

In this particular example, the [CommandKey] and the [FocusKey] can be customized in the Demo Configurator.

Once the RadAsyncUpload has been focused (by pressing [CommandKey] + [FocusKey]):

  • Open Select file context window by pressing Space.
  • Navigate forward and backward among the loaded files (if any) by pressing respectively Tab or Shift + Tab.
  • When uploaded file is selected, pressing Enter will remove it from the control.

Note: It is recommended to avoid [CommandKey] + [FocusKey] combinations matching keyboard shortcuts used in browsers. If the combination coincides with an existing browser shortcut the control may be unable to focus.

Note: Keyboard support for RadAsyncUpload is available for Internet Explorer 10 and above.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AsyncUpload.Examples.KeyboardSupport.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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 size-narrow">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1"
            DisablePlugins="true" UploadedFilesRendering="BelowFileInput">
        </telerik:RadAsyncUpload>
    </div>


    <telerik:RadAjaxManager ID="radajaxmanager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="configurationpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="configurationpanel1" LoadingPanelID="radajaxloadingpanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

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

    <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="M"
                                SelectionOnFocus="SelectAll"
                                Label="Focus key" />
                        </li>
                        <li>
                            <asp:CustomValidator ID="CustomValidator2" 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>
    <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance