Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


RibbonBar / Keyboard Support

Press ALT + R to activate the key hints. Press ESC to deactivate them

You can change both the command and the focus key from the configuration panel below.

Example Configuration
Clear log Event log:

  • 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
    • 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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        <style type="text/css">
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <qsf:Header runat="server" ID="Header1" ShowSkinChooser="false" NavigationLanguage="C#" />
        <div>
            <p>
            Press ALT + R to activate the key hints. Press ESC to deactivate them
            </p>
            <p>
            You can change both the command and the focus key from the configuration panel below.
            </p>
        </div>

        <qsf:ConfiguratorPanel runat="server" ID="ConfigPanel1">
            <span>Focus Key:</span>
            <asp:DropDownList runat="server" ID="FocusKeyDropDownList" AutoPostBack="true">
            </asp:DropDownList>
            <span>Command Key</span>
            <asp:DropDownList runat="server" ID="CommandKeyDropDownList" AutoPostBack="true">
            </asp:DropDownList>
        </qsf:ConfiguratorPanel>

        <div style="width: 854px; height: 280px; background: url('icons/demo_back.png') no-repeat 1px top;
            padding: 39px 13px 0">

            <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server"
                ApplicationMenuID="RadRibbonBarApplicationMenu1"
                OnClientApplicationMenuItemClicked="onApplicationMenuItemClicked"
                OnClientLoad="onLoad" OnClientSelectedTabChanged="onSelectedTabChanged"
                OnClientButtonClicked="onButtonClicked" OnClientButtonToggled="onButtonToggled"
                OnClientSplitButtonClicked="onMenuButtonClicked" OnClientMenuItemClicked="onMenuItemClicked"
                OnClientLauncherClicked="onLauncherClicked" OnClientToggleListToggled="onToggleListToggled"
                EnableQuickAccessToolbar="true"
                TabIndex="1">
                <ApplicationMenu Text="File" AccessKey="F">
                    <Items>
                        <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="icons/file/New.gif" AccessKey="N" />
                        <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="icons/file/Open.gif" AccessKey="O" />
                        <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="icons/file/Save.gif" AccessKey="S" />
                        <telerik:RibbonBarApplicationMenuItem Text="Save As" ImageUrl="icons/file/SaveAs.gif" AccessKey="A" />
                        <telerik:RibbonBarApplicationMenuItem Text="Close" ImageUrl="icons/file/Close.gif" AccessKey="C" />
                    </Items>
                </ApplicationMenu>
                <Tabs>
                    <telerik:RibbonBarTab Text="Home" AccessKey="H">
                        <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                            <Items>
                                <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="icons/home/Paste.png" QuickAccess="Active"
                                    AccessKey="V">
                                    <Items>
                                        <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="icons/home/Paste.png" AccessKey="P" />
                                        <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="icons/home/Paste.png"
                                            AccessKey="S" />
                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="icons/home/Cut.png" AccessKey="X" QuickAccess="Active" />
                                <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="icons/home/Copy.png"
                                    AccessKey="Z" />
                                <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="icons/home/Format_Painter.png"
                                    AccessKey="FP" QuickAccess="Active" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Font">
                            <Items>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="icons/home/font/Bold.png"
                                    AccessKey="1" />
                                <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="icons/home/font/Italic.png"
                                    AccessKey="2" />
                                <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="icons/home/font/Underline.png"
                                    AccessKey="3" />
                                <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="icons/home/font/Strike.png"
                                    AccessKey="4" />
                                <telerik:RibbonBarToggleList>
                                    <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="icons/home/font/Superscript.png"
                                            AccessKey="5" />
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="icons/home/font/Subscript.png"
                                            AccessKey="6" />
                                    </ToggleButtons>
                                </telerik:RibbonBarToggleList>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Paragraph">
                            <Items>
                                <telerik:RibbonBarButtonStrip>
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="Align Left" AccessKey="AL" ImageUrl="icons/home/paragraph/AlignLeft.png" />
                                        <telerik:RibbonBarButton Text="Align Center" AccessKey="AC" ImageUrl="icons/home/paragraph/AlignCenter.png" />
                                        <telerik:RibbonBarButton Text="Align Right" AccessKey="AR" ImageUrl="icons/home/paragraph/AlignRight.png" />
                                        <telerik:RibbonBarButton Text="Justify" AccessKey="AJ" ImageUrl="icons/home/paragraph/Justify.png" />
                                    </Buttons>
                                </telerik:RibbonBarButtonStrip>
                                <telerik:RibbonBarButtonStrip>
                                    <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Unordered List" AccessKey="U" ImageUrl="icons/home/paragraph/UL.png" />
                                        <telerik:RibbonBarButton Size="Small" Text="Numbered List" AccessKey="N" ImageUrl="icons/home/paragraph/OL.png" />
                                    </Buttons>
                                </telerik:RibbonBarButtonStrip>
                                <telerik:RibbonBarButtonStrip>
                                    <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" AccessKey="AO" ImageUrl="icons/home/paragraph/DecrIndent.png" />
                                        <telerik:RibbonBarButton Size="Small" Text="Increase Indent" AccessKey="AI" ImageUrl="icons/home/paragraph/IncrIndent.png" />
                                    </Buttons>
                                </telerik:RibbonBarButtonStrip>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                            <Items>
                                <telerik:RibbonBarSplitButton Size="Medium" Text="Find" AccessKey="FD" ImageUrl="icons/home/Find.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="Find..." AccessKey="F" ImageUrl="icons/home/Find.png" />
                                        <telerik:RibbonBarButton Text="Go to..." AccessKey="G" ImageUrl="icons/home/Go.png" />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarButton Size="Medium" Text="Replace" AccessKey="R" ImageUrl="icons/home/Replace.png" />
                                <telerik:RibbonBarMenu Size="Medium" Text="Select" AccessKey="SL" ImageUrl="icons/home/Select.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="icons/home/Select_All.png"
                                            AccessKey="A" />
                                        <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="icons/home/Select.png"
                                            AccessKey="S" />
                                    </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="icons/view/Zoom.png" />
                                        <telerik:RibbonBarToggleButton Size="Large" Text="100%" AccessKey="J" ImageUrl="icons/view/100.png" />
                                    </ToggleButtons>
                                </telerik:RibbonBarToggleList>
                                <telerik:RibbonBarToggleList>
                                    <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" AccessKey="1" ImageUrl="icons/view/One_Page.png" />
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" AccessKey="2" ImageUrl="icons/view/Two_Pages.png" />
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" AccessKey="I" ImageUrl="icons/view/Page_Width.png" />
                                    </ToggleButtons>
                                </telerik:RibbonBarToggleList>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Macros">
                            <Items>
                                <telerik:RibbonBarSplitButton Size="Large" Text="Macros" AccessKey="M" ImageUrl="icons/view/Macros.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="View Macros" AccessKey="W" ImageUrl="icons/view/Macros.png" />
                                        <telerik:RibbonBarButton Text="Record Macro..." AccessKey="R" ImageUrl="icons/view/Macros_Record.png" />
                                    </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="icons/insert/Picture.png"
                                    AccessKey="P" />
                                <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="icons/insert/Clipart.png"
                                    AccessKey="F" />
                                <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="icons/insert/Shapes.png"
                                    AccessKey="SH" />
                                <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="icons/insert/SmartArt.png"
                                    AccessKey="M" />
                                <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="icons/insert/Chart.png"
                                    AccessKey="C" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Links">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="icons/insert/Link.png"
                                    AccessKey="I" />
                                <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="icons/insert/Bookmark.png"
                                    AccessKey="K" />
                                <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="icons/insert/Cross_reference.png"
                                    AccessKey="RF" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                </Tabs>
            </telerik:RadRibbonBar>
            

            
        </div>
        <script type="text/javascript">
            function onLoad(sender, args) {
                logEvent("Load: " + sender.get_id());
            }

            function onSelectedTabChanged(sender, args) {
                logEvent("SelectedTabChanged: Selected is '" + args.get_tab().get_text() + "'");
            }

        
            function onButtonClicked(sender, args) {
                logEvent("ButtonClicked: " + args.get_button().get_text());
            }



            function onMenuButtonClicked(sender, args) {
                logEvent("SplitButtonClicked: " + args.get_button().get_text());
            }

            
            function onButtonToggled(sender, args) {
                logEvent("ToggleButtonToggled: " + args.get_button().get_text());
            }

            function onApplicationMenuItemClicked(sender, args) {
                logEvent("ApplicationMenuItemClicked " + args.get_item().get_text());
            }

            function onMenuItemClicked(sender, args) {
                logEvent("MenuItemClicked: " + args.get_item().get_text());
            }

            function onLauncherClicked(sender, args) {
                logEvent("LauncherClicked: " + args.get_group().get_text());
            }


            function onToggleListToggled(sender, args) {
                logEvent("ToggleListToggled: " + args.get_button().get_text());
            }
        </script>
        <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" />
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451