RibbonBar - Keyboard Support

  • FFile
  • HHome
  • VView
  • IInsert
VItem ImagePaste XItem ImageCutZItem ImageCopyFPItem ImageFormat
Clipboard
ALItem ImageACItem ImageARItem ImageAJItem Image
UItem ImageNItem Image
AOItem ImageAIItem Image
Paragraph
L
Styles
FDItem ImageFind 
  • FItem ImageFind...
  • GItem ImageGo to...
RItem ImageReplaceSLItem ImageSelect 
Editing
MItem ImageMacros 
  • WItem ImageView Macros
  • RItem ImageRecord Macro...
Macros
PItem ImagePictureFItem ImageClip ArtSHItem ImageShapesMItem ImageSmartArtCItem ImageChart
Illustrations
IItem ImageHyperlinkKItem ImageBookmarkRFItem ImageCross-reference
Links

Event log

Example Configuration

  • Focus KeyR
    Command KeyAlt
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadRibbonBar now supports keyboard naviagtion in pretty much the same manier as the desktop RibbonBar, which can be found in Word/Excel etc.

Due to the specifics of the web browsers, activating the key hints is not possible with a single command key as it is in the desktop ribbons (the ALT key). Instead, a key combination should be used. The default combo is Alt + R, however, it is completily possible to customize it using the CommandKey and FocusKey, which are part of the KeyboardNavigation configuration section.

Press ALt + R to activate the RibbonBar and show the key hints.

Important: The keynavigation will only work if there is a tabindex set on the ribbon. Due to how the browsers work, it is not possible to focus the ribbon otherwise.

  • Press a key hint key in order to:
    • Click on button
    • Toggle a button
    • Open split button menu
    • Open a menu
    • Open an application menu
    • Open an application split menu item
    • Click an application menu item
    • Open a gallery
    • Open a dropdown
    • Open a combobox
    • Open a colorpicker
  • Pressing ESC performs a step backward and shows the key hints on the previous level of nesting.
  • Pressing ESC when the focus is on the tabs level will call blur on the RibbonBar.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="RibbonBar.Examples.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>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
</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-wide">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" OnClientLoad="onLoad" Skin="Default"
            OnClientSelectedTabChanged="onSelectedTabChanged" OnClientButtonClicked="onButtonClicked"
            OnClientButtonToggled="onButtonToggled" OnClientSplitButtonClicked="onMenuButtonClicked"
            OnClientMenuItemClicked="onMenuItemClicked" OnClientLauncherClicked="onLauncherClicked"
            OnClientToggleListToggled="onToggleListToggled" OnClientApplicationMenuItemClicked="onApplicationMenuItemClicked"
            OnClientGalleryCommand="onGalleryCommand" OnClientDropDownSelectedIndexChanged="onDropDownSelectedIndexChanged"
            OnClientComboBoxSelectedIndexChanged="onComboBoxSelectedIndexChanged" OnClientColorPickerColorChanged="onColorPickerColorChanged"
            EnableQuickAccessToolbar="true"
            TabIndex="1">
            <ApplicationMenu Text="File" AccessKey="F">
                <Items>
                    <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="../../Images/Icons/file/New.png" AccessKey="N"/>
                    <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="../../Images/Icons/file/Open.png" AccessKey="O"/>
                    <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="../../Images/Icons/file/Save.png" AccessKey="S"/>
                    <telerik:RibbonBarApplicationSplitMenuItem Text="Save As" ImageUrl="../../Images/Icons/file/SaveAs.png" Header="Save document as" AccessKey="A" ExpandAccessKey="V">
                        <Items>
                            <telerik:RibbonBarApplicationMenuItem Text="Word Document (*.docx)" ImageUrl="../../Images/Icons/file/Document.png" AccessKey="1"/>
                            <telerik:RibbonBarApplicationMenuItem Text="Word 97-2003 Document (*.doc)" ImageUrl="../../Images/Icons/file/Document.png" AccessKey="2"/>
                            <telerik:RibbonBarApplicationMenuItem Text="PDF (*.pdf)" ImageUrl="../../Images/Icons/file/Document.png" AccessKey="3"/>
                            <telerik:RibbonBarApplicationMenuItem Text="Web Page (*.htm;*.html)" ImageUrl="../../Images/Icons/file/Document.png" AccessKey="4"/>
                            <telerik:RibbonBarApplicationMenuItem Text="Plain Text (*.txt)" ImageUrl="../../Images/Icons/file/Document.png" AccessKey="5"/>
                        </Items>
                    </telerik:RibbonBarApplicationSplitMenuItem>
                    <telerik:RibbonBarApplicationMenuItem Text="Close" ImageUrl="../../Images/Icons/file/Close.png" AccessKey="C"/>
                </Items>
                <AuxiliaryPane Header="Recent Documents">
                    <ContentTemplate>
                        <ol>
                            <li>Document 1.doc</li>
                            <li>Document 2.doc</li>
                            <li>Document 3.doc</li>
                            <li>Document 4.doc</li>
                            <li>Document 5.doc</li>
                        </ol>
                    </ContentTemplate>
                </AuxiliaryPane>
            </ApplicationMenu>
            <Tabs>
                <telerik:RibbonBarTab Text="Home" AccessKey="H">
                    <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png"
                                QuickAccess="Active" AccessKey="V">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png" AccessKey="P">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="../../Images/Icons/home/Paste.png"
                                        AccessKey="S">
                                    </telerik:RibbonBarMenuItem>
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="../../Images/Icons/home/Cut.png" AccessKey="X"
                                QuickAccess="Active"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="../../Images/Icons/home/Copy.png"
                                AccessKey="Z"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="../../Images/Icons/home/Format_Painter.png"
                                AccessKey="FP" QuickAccess="Active"></telerik:RibbonBarButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                        <Items>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarDropDown Width="97" AccessKey="FF">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="Arial" />
                                            <telerik:RibbonBarListItem Text="Calibri (body)" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Comic Sans" />
                                            <telerik:RibbonBarListItem Text="Tahoma" />
                                            <telerik:RibbonBarListItem Text="Verdana" />
                                        </Items>
                                    </telerik:RibbonBarDropDown>
                                    <telerik:RibbonBarComboBox Width="40" AccessKey="FS">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="8" />
                                            <telerik:RibbonBarListItem Text="9" />
                                            <telerik:RibbonBarListItem Text="10" Selected="true" />
                                            <telerik:RibbonBarListItem Text="11" />
                                            <telerik:RibbonBarListItem Text="12" />
                                            <telerik:RibbonBarListItem Text="14" />
                                            <telerik:RibbonBarListItem Text="16" />
                                            <telerik:RibbonBarListItem Text="18" />
                                            <telerik:RibbonBarListItem Text="20" />
                                            <telerik:RibbonBarListItem Text="22" />
                                            <telerik:RibbonBarListItem Text="24" />
                                            <telerik:RibbonBarListItem Text="26" />
                                            <telerik:RibbonBarListItem Text="28" />
                                        </Items>
                                    </telerik:RibbonBarComboBox>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="../../Images/Icons/home/font/Bold.png"
                                        AccessKey="1"></telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="../../Images/Icons/home/font/Italic.png"
                                        AccessKey="2"></telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="../../Images/Icons/home/font/Underline.png"
                                        AccessKey="3"></telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="../../Images/Icons/home/font/Strike.png"
                                        AccessKey="4"></telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleList>
                                        <ToggleButtons>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="../../Images/Icons/home/font/Superscript.png"
                                                AccessKey="5"></telerik:RibbonBarToggleButton>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="../../Images/Icons/home/font/Subscript.png"
                                                AccessKey="6"></telerik:RibbonBarToggleButton>
                                        </ToggleButtons>
                                    </telerik:RibbonBarToggleList>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarMenu Size="Small" Text="Change Case" ImageUrl="../../Images/Icons/home/font/Change_Case.png" AccessKey="7">
                                        <Items>
                                            <telerik:RibbonBarMenuItem Text="Sentence case." AccessKey="S">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="lowercase" AccessKey="L">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="UPPERCASE" AccessKey="U">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="Capitalize Each Word" AccessKey="C">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="tOGGLE cASE" AccessKey="T">
                                            </telerik:RibbonBarMenuItem>
                                        </Items>
                                    </telerik:RibbonBarMenu>
                                    <telerik:RibbonBarButton Size="Small" Text="Grow Font" ImageUrl="../../Images/Icons/home/font/Grow_Font.png"
                                        AccessKey="FG"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Shring Font" ImageUrl="../../Images/Icons/home/font/Shrink_Font.png"
                                        AccessKey="FK"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Clear Formatting" ImageUrl="../../Images/Icons/home/font/Clear_Formatting.png"
                                        AccessKey="E"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarColorPicker ImageUrl="../../Images/Icons/home/font/Font_Color.png" AccessKey="FC">
                                    </telerik:RibbonBarColorPicker>
                                </telerik:RibbonBarControlGroup>
                            </telerik:RibbonBarControlGroup>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Paragraph">
                        <Items>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Align Left" AccessKey="AL" ImageUrl="../../Images/Icons/home/paragraph/AlignLeft.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Align Center" AccessKey="AC" ImageUrl="../../Images/Icons/home/paragraph/AlignCenter.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Align Right" AccessKey="AR" ImageUrl="../../Images/Icons/home/paragraph/AlignRight.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Justify" AccessKey="AJ" ImageUrl="../../Images/Icons/home/paragraph/Justify.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Unordered List" AccessKey="U" ImageUrl="../../Images/Icons/home/paragraph/UL.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Numbered List" AccessKey="N" ImageUrl="../../Images/Icons/home/paragraph/OL.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" AccessKey="AO" ImageUrl="../../Images/Icons/home/paragraph/DecrIndent.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Increase Indent" AccessKey="AI" ImageUrl="../../Images/Icons/home/paragraph/IncrIndent.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Styles" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarGallery ItemHeight="50px" ItemWidth="60px" Columns="3" ExpandedColumns="4" AccessKey="L">
                                <telerik:RibbonBarGalleryCategory>
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Normal.png" Text="Normal" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/NoSpacing.png" Text="No Spacing" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Heading1.png" Text="Heading 1" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Heading2.png" Text="Heading 2" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Title.png" Text="Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Subtitle.png" Text="Subtitle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Emphasis.png" Text="Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Strong.png" Text="Strong" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/Quote.png" Text="Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntQuote.png" Text="Intense Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/SubReference.png" Text="Subtle Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/IntReference.png" Text="Intense Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/BookTitle.png" Text="Book Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/Icons/home/styles/ListParagraph.png" Text="List Paragraph" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Medium" Text="Find" AccessKey="FD" ImageUrl="../../Images/Icons/home/Find.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Find..." AccessKey="F" ImageUrl="../../Images/Icons/home/Find.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Go to..." AccessKey="G" ImageUrl="../../Images/Icons/home/Go.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Replace" AccessKey="R" ImageUrl="../../Images/Icons/home/Replace.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarMenu Size="Medium" Text="Select" AccessKey="SL" ImageUrl="../../Images/Icons/home/Select.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="../../Images/Icons/home/Select_All.png"
                                        AccessKey="A">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="../../Images/Icons/home/Select.png"
                                        AccessKey="S">
                                    </telerik:RibbonBarMenuItem>
                                </Items>
                            </telerik:RibbonBarMenu>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="View" AccessKey="V">
                    <telerik:RibbonBarGroup Text="Zoom">
                        <Items>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" AccessKey="Q" ImageUrl="../../Images/Icons/view/Zoom.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="100%" AccessKey="J" ImageUrl="../../Images/Icons/view/100.png">
                                    </telerik:RibbonBarToggleButton>
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" AccessKey="1" ImageUrl="../../Images/Icons/view/One_Page.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" AccessKey="2" ImageUrl="../../Images/Icons/view/Two_Pages.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" AccessKey="I" ImageUrl="../../Images/Icons/view/Page_Width.png">
                                    </telerik:RibbonBarToggleButton>
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Macros">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Large" Text="Macros" AccessKey="M" ImageUrl="../../Images/Icons/view/Macros.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="View Macros" AccessKey="W" ImageUrl="../../Images/Icons/view/Macros.png">
                                    </telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Record Macro..." AccessKey="R" ImageUrl="../../Images/Icons/view/Macros_Record.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="Insert" AccessKey="I">
                    <telerik:RibbonBarGroup Text="Illustrations">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="../../Images/Icons/insert/Picture.png"
                                AccessKey="P"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="../../Images/Icons/insert/Clipart.png"
                                AccessKey="F"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Shapes" ImageUrl="../../Images/Icons/insert/Shapes.png"
                                AccessKey="SH">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="../../Images/Icons/insert/SmartArt.png"
                                AccessKey="M"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="../../Images/Icons/insert/Chart.png"
                                AccessKey="C"></telerik:RibbonBarButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="../../Images/Icons/insert/Link.png"
                                AccessKey="I"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="../../Images/Icons/insert/Bookmark.png"
                                AccessKey="K"></telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="../../Images/Icons/insert/Cross_reference.png"
                                AccessKey="RF"></telerik:RibbonBarButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </Tabs>
        </telerik:RadRibbonBar>
    </div>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Example Configuration">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="FocusKeyDropDownList"
                                Label="Focus Key" AutoPostBack="true"
                                Size="Narrow" DropDownHeight="200px">
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="CommandKeyDropDownList"
                                Label="Command Key" AutoPostBack="true"
                                Size="Narrow" DropDownHeight="200px">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?