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 Q2 2011 released 07/12/2011
select

RibbonBar / First Look


  • RadRibbonBar, the newest addition 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.

    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.

    Currently, IE6 and IE7 are fully supported, and only Quirksmode still isn't (will be fixed in time for the SP1).

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" />
    </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 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" Width="854px" style="max-width: 854px; min-width: 200px" Skin="Office2007">
                <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 Text="Paste Special..." ImageUrl="icons/home/Paste.png" />
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="icons/home/Cut.png" />
                            <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="icons/home/Copy.png" />
                            <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="icons/home/Format_Painter.png" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                        <Items>
                            <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="icons/home/font/Bold.png" />
                            <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="icons/home/font/Italic.png" />
                            <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="icons/home/font/Underline.png" />
                            <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="icons/home/font/Strike.png" />
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="icons/home/font/Superscript.png" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="icons/home/font/Subscript.png" />
                                </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 Text="Align Center" ImageUrl="icons/home/paragraph/AlignCenter.png" />
                                    <telerik:RibbonBarButton Text="Align Right" ImageUrl="icons/home/paragraph/AlignRight.png" />
                                    <telerik:RibbonBarButton Text="Justify" ImageUrl="icons/home/paragraph/Justify.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="icons/home/paragraph/UL.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="icons/home/paragraph/OL.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="icons/home/paragraph/DecrIndent.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Increase Indent" 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" ImageUrl="icons/home/Find.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Find..." ImageUrl="icons/home/Find.png" />
                                    <telerik:RibbonBarButton Text="Go to..." ImageUrl="icons/home/Go.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="icons/home/Replace.png" />
                            <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 Text="Select Objects" ImageUrl="icons/home/Select.png" />
                                </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 Size="Large" Text="Clip Art" ImageUrl="icons/insert/Clipart.png" />
                            <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="icons/insert/Shapes.png" />
                            <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="icons/insert/SmartArt.png" />
                            <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="icons/insert/Chart.png" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="icons/insert/Link.png" />
                            <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="icons/insert/Bookmark.png" />
                            <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="icons/insert/Cross_reference.png" />
                        </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 Size="Large" Text="100%" ImageUrl="icons/view/100.png" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="icons/view/One_Page.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="icons/view/Two_Pages.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="icons/view/Page_Width.png" />
                                </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 Text="Record Macro..." ImageUrl="icons/view/Macros_Record.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </telerik:RadRibbonBar>
        </div>
        <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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451