Wizard - Keyboard Support







Demo Configurator

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

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?