PanelBar - Keyboard Support

  • ASP.NET controls
    • RadMenu
    • RadTabStrip
    • RadPanelBar
    • RadTreeView
  • WinForms controls
    • RadMenustrip
    • RadTabStrip
    • RadToolStrip
  • Other projects
    • SiteFinity
    • Reporting
    • RadAjax

Demo Configurator

  • Command keyAlt
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 navigation. RadPanelBar will seamlessly switch between mouse and keyboard navigation.

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

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />

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 PanelBars 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 RadPanelBar is focused (by pressing [CommandKey] + [FocusKey]):

  • Navigate among items using Down and Up arrows.
  • Select (trigger click on) item by pressing Enter, when item is active.
  • Expand/Collapse sub-item list of an item by pressing Space.
  • Press Ctrl + Up arrow to move to parent.
  • Press Home to focus the first sibling item.
  • Press End to focus the last sibling item.

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="PanelBar.Examples.Functionality.KeyboardSupport.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>

    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" TabIndex="1" Width="100%" Height="300" ExpandMode="FullExpandedItem">
                <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">
                        <telerik:RadPanelItem Text="RadMenu" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadPanelBar" />
                        <telerik:RadPanelItem Text="RadTreeView" />
                <telerik:RadPanelItem Text="WinForms controls">
                        <telerik:RadPanelItem Text="RadMenustrip" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadToolStrip" />
                <telerik:RadPanelItem Text="Other projects">
                        <telerik:RadPanelItem Text="SiteFinity" />
                        <telerik:RadPanelItem Text="Reporting" />
                        <telerik:RadPanelItem Text="RadAjax" />

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

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

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

                    <ul class="fb-group">
                            <qsf:DropDownList runat="server" ID="DropDownListCommandKey"
                                Label="Command key" />
                            <qsf:MaskedTextBox runat="server" ID="RadMaskedTextBoxFocusKey"
                                Label="Focus key" />
                            <asp:CustomValidator ID="CustomValidator2" runat="server"
                                Text="* Please type a valid uppercase Latin letter"
                                ClientValidationFunction="validateFocusKey" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            function validateFocusKey(source, arguments) {
                var maskedTextBox = $find("<%= RadMaskedTextBoxFocusKey.ClientID %>");
                var textBoxValue = maskedTextBox.get_textBoxValue().trim();

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

                var keyCode = textBoxValue.charCodeAt(0);

                if (keyCode < 65 || keyCode > 90) {
                    arguments.IsValid = false;
                arguments.IsValid = true;

Find Assistance

Help Us Improve

Was this example helpful?