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

Keyboard Support







  • Demo Configurator

Keyboard support

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox to focus the RadWizard.

Navigating

Press Tab to navigate through the controls and wizard step buttons. .

Once a wizard step button is focused use the Arrow keys or TAB to navigate through the items and press Enter to trigger the button's event.

Review the following topic from the online documentation for more details: Keyboard Support Overview.

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

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

<!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" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBoxAccessKey">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDropDownList1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBoxAccessKey" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

     <div class="demo-container">
    <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1" Height="360px"  AccessKey="A" DisplayCancelButton="true" TabIndex="1">
        <WizardSteps>
            <telerik:RadWizardStep ID="RadWizardStep1" Title="Name" StepType="Start">
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox1" Label="First Name" LabelWidth="100px" Width="400px" TabIndex="1">
                </telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox2" Label="Middle Name" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox3" Label="Last Name" LabelWidth="100px" Width="400px" TabIndex="1" ></telerik:RadTextBox>
            </telerik:RadWizardStep>
            <telerik:RadWizardStep ID="RadWizardStep2" Title="Address" DisplayCancelButton="false">
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox4" Label="Country" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox5" Label="City" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox6" Label="Address" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
            </telerik:RadWizardStep>
            <telerik:RadWizardStep ID="RadWizardStep3" Title="Other" StepType="Finish">
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox7" Label="Hobby" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox8" Label="Music" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
                <br />
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox9" Label="Sport" LabelWidth="100px" Width="400px" TabIndex="1"></telerik:RadTextBox>
            </telerik:RadWizardStep>
        </WizardSteps>
    </telerik:RadWizard>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:MaskedTextBox ID="RadMaskedTextBoxAccessKey" runat="server" Width="160px"
                    Mask="L" Text="A" AutoPostBack="true" SelectionOnFocus="SelectAll"
                    OnTextChanged="RadMaskedTextBoxAccessKey_TextChanged" Label="Access key" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance