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

Quick Access Toolbar

  • Home
Item ImagePaste 
Item ImageCutItem ImageCopyItem ImageFormat
Clipboard
Item ImageItem ImageItem ImageItem ImageItem ImageItem Image
Font
Item ImageItem ImageItem ImageItem Image
Item ImageItem Image
Item ImageItem Image
Paragraph
Item ImageFind 
  • Item ImageFind...
  • Item ImageGo to...
Item ImageReplaceItem ImageSelect 
Editing

Configuring the Quick Access Toolbar

  • RadRibbonBar.EnableQuickAccessToolbar
    • False (default) - disables the QAT.
    • True - enables the QAT.
  • RibbonBar[Button|SplitButton|Menu|ToggleButton].QuickAccess
    • Disabled (default) - the command does not appear in the QAT.
    • Active - the command is added to the QAT and is immediately available for usage.
    • Inactive - the command is added to the QAT but is not immediately available for usage.
      Can be shown by checking its corresponding option in the QAT drop down.

The Quick Access Toolbar allows you to choose the most used RadRibbonBar commands that are currently available and put shortcuts to them in the title bar of the control. The shortcuts function in the same way as the original commands - they fire both their client-side and server-side events. All types of commands (Button, Split Button, Menu, Toggle Button) are supported.

Additionally the drop down of the QAT allows the user to hide/show those commands they do or do not need at the moment of interaction with the control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="RibbonBar.Examples.RenderModes.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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" />
    <div class="demo-container size-wide">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" EnableQuickAccessToolbar="true">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="../../Images/Icons/home/Paste.png">
                                </telerik:RibbonBarMenuItem>
                            </Items>
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="../../Images/Icons/home/Cut.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton QuickAccess="Inactive" Size="Medium" Text="Copy" ImageUrl="../../Images/Icons/home/Copy.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="../../Images/Icons/home/Format_Painter.png">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Font">
                    <Items>
                        <telerik:RibbonBarToggleButton QuickAccess="Active" Size="Small" Text="Bold" ImageUrl="../../Images/Icons/home/font/Bold.png">
                        </telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="../../Images/Icons/home/font/Italic.png">
                        </telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="../../Images/Icons/home/font/Underline.png">
                        </telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="../../Images/Icons/home/font/Strike.png">
                        </telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton QuickAccess="Active" Size="Small" Text="Superscript"
                                    ImageUrl="../../Images/Icons/home/font/Superscript.png"></telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="../../Images/Icons/home/font/Subscript.png">
                                </telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Paragraph">
                    <Items>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Text="Align Left" ImageUrl="../../Images/Icons/home/paragraph/AlignLeft.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Center" ImageUrl="../../Images/Icons/home/paragraph/AlignCenter.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Right" ImageUrl="../../Images/Icons/home/paragraph/AlignRight.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Justify" ImageUrl="../../Images/Icons/home/paragraph/Justify.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="../../Images/Icons/home/paragraph/UL.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="../../Images/Icons/home/paragraph/OL.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="../../Images/Icons/home/paragraph/DecrIndent.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="../../Images/Icons/home/paragraph/IncrIndent.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Medium" Text="Find" ImageUrl="../../Images/Icons/home/Find.png">
                            <Buttons>
                                <telerik:RibbonBarButton QuickAccess="Inactive" Text="Find..." ImageUrl="../../Images/Icons/home/Find.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Go to..." ImageUrl="../../Images/Icons/home/Go.png"></telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                        <telerik:RibbonBarButton QuickAccess="Inactive" Size="Medium" Text="Replace" ImageUrl="../../Images/Icons/home/Replace.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarMenu QuickAccess="Inactive" Size="Medium" Text="Select" ImageUrl="../../Images/Icons/home/Select.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="../../Images/Icons/home/Select_All.png">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="../../Images/Icons/home/Select.png">
                                </telerik:RibbonBarMenuItem>
                            </Items>
                        </telerik:RibbonBarMenu>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance