RibbonBar

Controls

Rate this demo

Thank you for your post!

RadRibbonBar - Telerik's ASP.NET RibbonBar

About RadRibbonBar for ASP.NET AJAX

RadRibbonBar, one of the newest additions to the suite of RadControls for ASP.NET AJAX, brings the ability to create rich toolboxes, which typically cannot be seen in web applications. We are trying to follow the development guidelines of Microsoft Ribbon specification and to give it the look and feel you can find in many modern applications today such as those found in Microsoft Office.

RadRibbonBar and 70+ other controls are part of RadControls for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on the business logic of the app.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the RadControls) to quickly create, upgrade and configure your RadControls projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the RadControls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular RibbonBar demo, you can use the following path to find it in the sample website application:
ribbonbar/examples/overview

Key Features

  • Unique Navigation.
  • Templates.
  • Keyboard Support.
  • Quick Access Toolbar.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="Info.ascx" TagPrefix="qsf" TagName="Info" %>

<!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>
    <title>ASP.NET Ribbon control demo | Telerik's RibbonBar Examples</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

     <div class="qsf-demo-canvas">
          <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Width="854px" Style="max-width: 854px;"
               Skin="Office2007" EnableMinimizing="true">
               <telerik:RibbonBarTab Text="Home">
                    <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                         <Items>
                              <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="icons/home/Paste.png">
                                   <Items>
                                        <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="icons/home/Paste.png">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="icons/home/Paste.png">
                                        </telerik:RibbonBarMenuItem>
                                   </Items>
                              </telerik:RibbonBarMenu>
                              <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="icons/home/Cut.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="icons/home/Copy.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="icons/home/Format_Painter.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                         <Items>
                              <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="icons/home/font/Bold.png">
                              </telerik:RibbonBarToggleButton>
                              <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="icons/home/font/Italic.png">
                              </telerik:RibbonBarToggleButton>
                              <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="icons/home/font/Underline.png">
                              </telerik:RibbonBarToggleButton>
                              <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="icons/home/font/Strike.png">
                              </telerik:RibbonBarToggleButton>
                              <telerik:RibbonBarToggleList>
                                   <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="icons/home/font/Superscript.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="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="icons/home/paragraph/AlignLeft.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Align Center" ImageUrl="icons/home/paragraph/AlignCenter.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Align Right" ImageUrl="icons/home/paragraph/AlignRight.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Justify" ImageUrl="icons/home/paragraph/Justify.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarButtonStrip>
                              <telerik:RibbonBarButtonStrip>
                                   <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="icons/home/paragraph/UL.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="icons/home/paragraph/OL.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarButtonStrip>
                              <telerik:RibbonBarButtonStrip>
                                   <Buttons>
                                        <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="icons/home/paragraph/DecrIndent.png">
                                        </telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="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="icons/home/Find.png">
                                   <Buttons>
                                        <telerik:RibbonBarButton Text="Find..." ImageUrl="icons/home/Find.png"></telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Go to..." ImageUrl="icons/home/Go.png"></telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarSplitButton>
                              <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="icons/home/Replace.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="icons/home/Select.png">
                                   <Items>
                                        <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="icons/home/Select_All.png">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="icons/home/Select.png">
                                        </telerik:RibbonBarMenuItem>
                                   </Items>
                              </telerik:RibbonBarMenu>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
               <telerik:RibbonBarTab Text="Insert">
                    <telerik:RibbonBarGroup Text="Illustrations">
                         <Items>
                              <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="icons/insert/Picture.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="icons/insert/Clipart.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="icons/insert/Shapes.png">
                              </telerik:RibbonBarMenu>
                              <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="icons/insert/SmartArt.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="icons/insert/Chart.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                         <Items>
                              <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="icons/insert/Link.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="icons/insert/Bookmark.png">
                              </telerik:RibbonBarButton>
                              <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="icons/insert/Cross_reference.png">
                              </telerik:RibbonBarButton>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
               <telerik:RibbonBarTab Text="View">
                    <telerik:RibbonBarGroup Text="Zoom">
                         <Items>
                              <telerik:RibbonBarToggleList>
                                   <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" ImageUrl="icons/view/Zoom.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="icons/view/100.png">
                                        </telerik:RibbonBarToggleButton>
                                   </ToggleButtons>
                              </telerik:RibbonBarToggleList>
                              <telerik:RibbonBarToggleList>
                                   <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="icons/view/One_Page.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="icons/view/Two_Pages.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="icons/view/Page_Width.png">
                                        </telerik:RibbonBarToggleButton>
                                   </ToggleButtons>
                              </telerik:RibbonBarToggleList>
                         </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Macros">
                         <Items>
                              <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="icons/view/Macros.png">
                                   <Buttons>
                                        <telerik:RibbonBarButton Text="View Macros" ImageUrl="icons/view/Macros.png"></telerik:RibbonBarButton>
                                        <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="icons/view/Macros_Record.png">
                                        </telerik:RibbonBarButton>
                                   </Buttons>
                              </telerik:RibbonBarSplitButton>
                         </Items>
                    </telerik:RibbonBarGroup>
               </telerik:RibbonBarTab>
          </telerik:RadRibbonBar>
     </div>


    </form>
</body>
</html>