RadRibbonBar - Telerik ASP.NET RibbonBar

Paragraph
Item ImageItem ImageItem ImageItem Image
Item ImageItem Image
Item ImageItem Image
Styles
  • imageNormal
  • imageNo Spacing
  • imageHeading 1
  • imageHeading 2
  • imageTitle
  • imageSubtitle
  • imageSubtle Emphasis
  • imageEmphasis
  • imageIntense Emphasis
  • imageStrong
  • imageQuote
  • imageIntense Quote
  • imageSubtle Reference
  • imageIntense Reference
  • imageBook Title
  • imageList Paragraph
Isolate this demo as a stand-alone application

In the first version of this control, we are presenting the following tools, which you can use to build your RadRibbonBar:

  • RibbonBarTab
  • RibbonBarGroup
  • RibbonBarButton
  • RibbonBarMenu
  • RibbonBarSplitButton
  • RibbonBarButtonStrip
  • RibbonBarToggleButton
  • RibbonBarToggleList

From these the Tab and Group are structure-only elements. The Menu, SplitButton and ToggleList are both structure and logic elements.

The Button and the ToggleButton are action-only elements. And, finally, the ButtonStrip is appearance-only element (changes the look of contained elements).

Important thing to note about the current event model is that all the event handlers are being assigned in the main RadRibbonBar tag, in order to try making declarations more structured, consistent and easy to read. Check the events examples in the "Events" section.

One of the truly unique features this control is offering is its client resizing. It should mimic the resizing behavior of Microsoft Ribbon control and while still work in progress it can collapse/expand groups and buttons. You need to specify the Size property of all action items which defines the default state of a button which can be Small/Medium or Large and while big sizes can collapse to small, expanding the button size only works up to its original Size.

About RadRibbonBar for ASP.NET AJAX

RadRibbonBar, one of the newest additions to the suite of Telerik UI 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 80+ other controls are part of UI 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 its business logic.

Key Features

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

More about RibbonBar for ASP.NET AJAX

<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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" />
    <div class="demo-container">
        <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server"
            Skin="Office2007" EnableMinimizing="true">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="images/home/Paste.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="images/home/Paste.png">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="images/home/Paste.png">
                                </telerik:RibbonBarMenuItem>
                            </Items>
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="images/home/Cut.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="images/home/Copy.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="images/home/Format_Painter.png">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Font">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Vertical">
                            <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                <telerik:RibbonBarDropDown Width="97">
                                    <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">
                                    <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/home/font/Bold.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="images/home/font/Italic.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="images/home/font/Underline.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="images/home/font/Strike.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleList>
                                    <ToggleButtons>
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="images/home/font/Superscript.png">
                                        </telerik:RibbonBarToggleButton>
                                        <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="images/home/font/Subscript.png">
                                        </telerik:RibbonBarToggleButton>
                                    </ToggleButtons>
                                </telerik:RibbonBarToggleList>
                            </telerik:RibbonBarControlGroup>
                            <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                <telerik:RibbonBarMenu Size="Small" Text="Change Case" ImageUrl="images/home/font/Change_Case.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem Text="Sentence case.">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="lowercase">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="UPPERCASE">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Capitalize Each Word">
                                        </telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="tOGGLE cASE">
                                        </telerik:RibbonBarMenuItem>
                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarButton Size="Small" Text="Grow Font" ImageUrl="images/home/font/Grow_Font.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Shring Font" ImageUrl="images/home/font/Shrink_Font.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Clear Formatting" ImageUrl="images/home/font/Clear_Formatting.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarColorPicker ImageUrl="images/home/font/Font_Color.png">
                                </telerik:RibbonBarColorPicker>
                            </telerik:RibbonBarControlGroup>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Paragraph">
                    <Items>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Text="Align Left" ImageUrl="images/home/paragraph/AlignLeft.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Center" ImageUrl="images/home/paragraph/AlignCenter.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Right" ImageUrl="images/home/paragraph/AlignRight.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Justify" ImageUrl="images/home/paragraph/Justify.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="images/home/paragraph/UL.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="images/home/paragraph/OL.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="images/home/paragraph/DecrIndent.png">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="images/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">
                            <telerik:RibbonBarGalleryCategory>
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Normal.png" Text="Normal" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/NoSpacing.png" Text="No Spacing" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Heading1.png" Text="Heading 1" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Heading2.png" Text="Heading 2" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Title.png" Text="Title" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Subtitle.png" Text="Subtitle" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Emphasis.png" Text="Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Strong.png" Text="Strong" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/Quote.png" Text="Quote" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/IntQuote.png" Text="Intense Quote" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/SubReference.png" Text="Subtle Reference" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/IntReference.png" Text="Intense Reference" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/home/styles/BookTitle.png" Text="Book Title" />
                                <telerik:RibbonBarGalleryItem ImageUrl="images/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" ImageUrl="images/home/Find.png">
                            <Buttons>
                                <telerik:RibbonBarButton Text="Find..." ImageUrl="images/home/Find.png"></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Go to..." ImageUrl="images/home/Go.png"></telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="images/home/Replace.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="images/home/Select.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="images/home/Select_All.png">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="images/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="images/insert/Picture.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="images/insert/Clipart.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="images/insert/Shapes.png">
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="images/insert/SmartArt.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="images/insert/Chart.png">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Links">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="images/insert/Link.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="images/insert/Bookmark.png">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="images/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="images/view/Zoom.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="images/view/100.png">
                                </telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="images/view/One_Page.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="images/view/Two_Pages.png">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="images/view/Page_Width.png">
                                </telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Macros">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="images/view/Macros.png">
                            <Buttons>
                                <telerik:RibbonBarButton Text="View Macros" ImageUrl="images/view/Macros.png"></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="images/view/Macros_Record.png">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?