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

ToolBar / Office 2007 RibbonBar


  • This example shows how to create an "Office 2007" like Ribbon bar using the RadControls for ASP.NET suite.

    The menu, tabstrip, toolbar and combobox controls feature a special skin called Office2007. All controls in this example use the Office2007 skin.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Controls.Integration.RibbonBar.DefaultVB" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.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 id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        
        <link rel="stylesheet" type="text/css" href="Skins/Office2007Big/Menu.Office2007Big.css" />
        <link rel="stylesheet" type="text/css" href="ApplicationStyles.css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="false" />
            
            <div class="applicationWrapper">
                <div class="menuBar">
                    <div class="titleBar">
                        <div class="cmdBar">
                            <!-- toolbar -->
                            <ul>
                                <li><a href="#" title="Save">
                                    <img src="Images/Cmd_Save.gif" height="16" width="16" alt="Save" /></a></li>
                                <li><a href="#" title="Undo">
                                    <img src="Images/Cmd_Undo.gif" height="16" width="16" alt="Undo" /></a></li>
                                <li><a href="#" title="Redo">
                                    <img src="Images/Cmd_Redo.gif" height="16" width="16" alt="Redo" /></a></li>
                                <li><a href="#" title="Print">
                                    <img src="Images/Cmd_Print.gif" height="16" width="16" alt="Print" /></a></li>
                            </ul>
                        </div>
                        <!-- / toolbar -->
                        <div class="documentTitle">
                            <img src="Images/Document2.gif" width="181" height="29" alt="" /></div>
                        <div class="windowControls">
                            <img src="Images/windowControls.gif" width="78" height="29" alt="" /></div>
                    </div>
                </div>
                <div class="ribbonBar" style="position:relative;z-index:3;">
                    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Office2007Big" EnableEmbeddedSkins="false" CssClass="Office2007RootItem" EnableScreenBoundaryDetection="false" style="position:absolute;margin-top:-31px;margin-left:-1px;">
                        <Items>
                            <telerik:RadMenuItem ImageUrl="Images/TelerikButton.gif" HoveredImageUrl="Images/TelerikButtonHover.gif"
                                CssClass="myClass">
                                <Items>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/New.gif" Text="New" AccessKey="N">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Open.gif" Text="Open" AccessKey="O">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="True">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Save.gif" Text="Save" AccessKey="S">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/SaveAs.gif" Text="Save As" AccessKey="A">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="True">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Print.gif" Text="Print" AccessKey="P">
                                        <Items>
                                            <telerik:RadMenuItem Text="Preview and Print the Document" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Print.gif" Text="Print" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/QuickPrint.gif" Text="Quick Print" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/PrintPreview.gif" Text="Print Preview" />
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Finish.gif" Text="Finish" AccessKey="F">
                                        <Items>
                                            <telerik:RadMenuItem Text="Prepare the Document for Distribution" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Properties.gif" Text="Properties" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/InspectDocument.gif" Text="Inspect Document" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/RestrictPermission.gif" Text="Restrict Permission" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/DigitalSignature.gif" Text="Add a Digital Signature" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/CompatibilityChecker.gif" Text="Compatibility Checker" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/MarkAsFinal.gif" Text="Mark as Final" />
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Send.gif" Text="Send" AccessKey="e">
                                        <Items>
                                            <telerik:RadMenuItem Text="Send a Copy of the Document to Other People" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/SendEmail.gif" Text="Email" />
                                            <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/InternetFax.gif" Text="Internet Fax" />
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Publish.gif" Text="Publish" AccessKey="u">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="True">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem ImageUrl="Images/VistaRibbon/Close.gif" Text="Close" AccessKey="C">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0"
                        Skin="Office2007" Width="628px" style="padding-left:50px;" ShowBaseLine="true">
                        <Tabs>
                            <telerik:RadTab Text="Home" />
                            <telerik:RadTab Text="Insert" />
                            <telerik:RadTab Text="Page Layout" />
                            <telerik:RadTab Text="References" />
                            <telerik:RadTab Text="Mailings" />
                            <telerik:RadTab Text="Review" />
                            <telerik:RadTab Text="View" />
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Height="100px"
                        SelectedIndex="0" CssClass="MultipageWrapper">
                        <telerik:RadPageView ID="pv0" runat="server">
                            <table class="ribbonDock" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img src="Images/DockTopLeft.gif" height="3" width="3" alt="" /></td>
                                    <td class="dockTop">
                                    </td>
                                    <td>
                                        <img src="Images/DockTopRight.gif" height="3" width="3" alt="" /></td>
                                </tr>
                                <tr>
                                    <td class="middleLeft">
                                        &nbsp;</td>
                                    <td class="toolsContainer" style="padding-top: 0px;">
                                        <table cellpadding="0" cellspacing="0" class="innerTable">
                                            <tr>
                                                <td>
                                                    <ul class="mostUsedCommand">
                                                        <li><a href="javascript:;" title="Paste">
                                                            <img alt="commandArrow" src="Images/Cmd_Paste_32x32.gif" height="32" width="32" /><span>Paste</span><span
                                                                class="last"><img src="Images/MostUsedCommandArrow.gif" width="5" height="4" alt="" /></span></a>
                                                        </li>
                                                    </ul>
                                                </td>
                                                <td>
                                                    <telerik:RadToolBar ID="RadToolbar1" Orientation="Vertical" runat="server" Skin="Office2007">
                                                        <Items>
                                                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Cut.gif" CommandName="Cut" />
                                                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Copy.gif" CommandName="Copy" />
                                                        </Items>
                                                    </telerik:RadToolBar>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="middleRight">
                                        &nbsp;</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="Images/DockBottomLeft.gif" height="16" width="3" alt="" /></td>
                                    <td class="dockTitle">
                                        <div class="titleText">
                                            Clipboard</div>
                                        <div class="dockGrip">
                                        </div>
                                    </td>
                                    <td>
                                        <img src="Images/DockBottomRight.gif" height="16" width="3" alt="" /></td>
                                </tr>
                            </table>
                            <table class="ribbonDock" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img src="Images/DockTopLeft.gif" height="3" width="3" alt="" /></td>
                                    <td class="dockTop">
                                    </td>
                                    <td>
                                        <img src="Images/DockTopRight.gif" height="3" width="3" alt="" /></td>
                                </tr>
                                <tr>
                                    <td class="middleLeft">
                                        &nbsp;</td>
                                    <td class="toolsContainer">
                                        <telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="true" Skin="Office2007" EmptyMessage="Font">
                                            <Items>
                                                <telerik:RadComboBoxItem Text="Arial" />
                                                <telerik:RadComboBoxItem Text="Comic Sans MS" />
                                                <telerik:RadComboBoxItem Text="Courier" />
                                                <telerik:RadComboBoxItem Text="Courier New" />
                                                <telerik:RadComboBoxItem Text="Garamond" />
                                                <telerik:RadComboBoxItem Text="Helvetica" />
                                                <telerik:RadComboBoxItem Text="Impact" />
                                                <telerik:RadComboBoxItem Text="System" />
                                                <telerik:RadComboBoxItem Text="Times New Roman" />
                                                <telerik:RadComboBoxItem Text="Verdana" />
                                            </Items>
                                        </telerik:RadComboBox>
                                        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="57px" AllowCustomText="true" Skin="Office2007" EmptyMessage="Size">
                                            <Items>
                                                <telerik:RadComboBoxItem Text="8" />
                                                <telerik:RadComboBoxItem Text="10" />
                                                <telerik:RadComboBoxItem Text="12" />
                                                <telerik:RadComboBoxItem Text="14" />
                                                <telerik:RadComboBoxItem Text="16" />
                                                <telerik:RadComboBoxItem Text="16" />
                                                <telerik:RadComboBoxItem Text="18" />
                                                <telerik:RadComboBoxItem Text="20" />
                                                <telerik:RadComboBoxItem Text="22" />
                                                <telerik:RadComboBoxItem Text="24" />
                                                <telerik:RadComboBoxItem Text="26" />
                                                <telerik:RadComboBoxItem Text="28" />
                                                <telerik:RadComboBoxItem Text="30" />
                                                <telerik:RadComboBoxItem Text="32" />
                                            </Items>
                                        </telerik:RadComboBox>
                                        <br />
                                        <br />
                                        <telerik:RadToolBar ID="RadToolbar2" runat="server" Skin="Office2007">
                                            <Items>
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Bold.gif" CommandName="Bold" CheckOnClick="true" Group="Format" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Italic.gif" CommandName="Italic" CheckOnClick="true" Group="Format" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Underline.gif" CommandName="Underline" CheckOnClick="true" Group="Format" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Numbering.gif" CheckOnClick="true" Group="lists" CommandName="Numbering" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Bullets.gif" CheckOnClick="true" Group="lists" CommandName="Bullets" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/IncreaseIndent.gif" CommandName="increaseIndent" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/DecreaseIndent.gif" CommandName="decreaseIndent" />
                                            </Items>
                                        </telerik:RadToolBar>
                                    </td>
                                    <td class="middleRight">
                                        &nbsp;</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="Images/DockBottomLeft.gif" height="16" width="3" alt="" /></td>
                                    <td class="dockTitle">
                                        <div class="titleText">
                                            Font</div>
                                        <div class="dockGrip">
                                        </div>
                                    </td>
                                    <td>
                                        <img src="Images/DockBottomRight.gif" height="16" width="3" alt="" /></td>
                                </tr>
                            </table>
                            <table class="ribbonDock" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img src="Images/DockTopLeft.gif" height="3" width="3" alt="" /></td>
                                    <td class="dockTop">
                                    </td>
                                    <td>
                                        <img src="Images/DockTopRight.gif" height="3" width="3" alt="" /></td>
                                </tr>
                                <tr>
                                    <td class="middleLeft">
                                        &nbsp;</td>
                                    <td class="toolsContainer">
                                        <div style="border: solid 2px white; float: left; cursor: hand;" onmouseover="this.style.border='solid 2px #ffdb64';"
                                            onmouseout="this.style.border='solid 2px white';">
                                            <img src="Images/Emphasis.gif" height="48" width="64" alt="Emphasis" /></div>
                                        <div style="border: solid 2px white; float: left; margin-left: 8px; margin-right: 8px;
                                            cursor: hand;" onmouseover="this.style.border='solid 2px #ffdb64';" onmouseout="this.style.border='solid 2px white';">
                                            <img src="Images/Heading.gif" height="48" width="64" alt="Heading 1" /></div>
                                        <div style="border: solid 2px white; float: left; cursor: hand;" onmouseover="this.style.border='solid 2px #ffdb64';"
                                            onmouseout="this.style.border='solid 2px white';">
                                            <img src="Images/Heading2.gif" height="48" width="64" alt="Heading 2" /></div>
                                    </td>
                                    <td class="middleRight">
                                        &nbsp;</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="Images/DockBottomLeft.gif" height="16" width="3" alt="" /></td>
                                    <td class="dockTitle">
                                        <div class="titleText">
                                            Styles</div>
                                        <div class="dockGrip">
                                        </div>
                                    </td>
                                    <td>
                                        <img src="Images/DockBottomRight.gif" height="16" width="3" alt="" /></td>
                                </tr>
                            </table>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="pv1" runat="server">
                            <table class="ribbonDock" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img src="Images/DockTopLeft.gif" height="3" width="3" alt="" /></td>
                                    <td class="dockTop">
                                    </td>
                                    <td>
                                        <img src="Images/DockTopRight.gif" height="3" width="3" alt="" /></td>
                                </tr>
                                <tr>
                                    <td class="middleLeft">
                                        &nbsp;</td>
                                    <td class="toolsContainer">
                                        <telerik:RadToolBar ID="RadToolbar3" runat="server" Skin="Office2007" Width="160px">
                                            <Items>
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/AlignLeft.gif" CheckOnClick="true" Checked="True" Group="AlignmentOptions" CommandName="alignLeft" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/AlignRight.gif" CheckOnClick="true" Group="AlignmentOptions" CommandName="alignRight" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Center.gif" CheckOnClick="true" Group="AlignmentOptions" CommandName="Center" />
                                                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Justify.gif" CheckOnClick="true" Group="AlignmentOptions" CommandName="Justify" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/SpellCheck.gif" CommandName="spellCheck" />
                                            </Items>
                                        </telerik:RadToolBar>
                                        <br style="clear: left;" />
                                        <telerik:RadToolBar ID="RadToolbar4" runat="server" Skin="Office2007" Width="160px">
                                            <Items>
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/ForeColor.gif" CommandName="foreColor" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/BackColor.gif" CommandName="backColor" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Open.gif" CommandName="Open" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Print.gif" CommandName="Print" />
                                                <telerik:RadToolbarButton ImageUrl="~/ToolBar/Examples/ApplicationScenarios/RibbonBar/Images/Help.gif" CommandName="Help" />
                                            </Items>
                                        </telerik:RadToolBar>
                                    </td>
                                    <td class="middleRight">
                                        &nbsp;</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="Images/DockBottomLeft.gif" height="16" width="3" alt="" /></td>
                                    <td class="dockTitle">
                                        <div class="titleText">
                                            Format</div>
                                        <div class="dockGrip">
                                        </div>
                                    </td>
                                    <td>
                                        <img src="Images/DockBottomRight.gif" height="16" width="3" alt="" /></td>
                                </tr>
                            </table>
                            <table class="ribbonDock" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img src="Images/DockTopLeft.gif" height="3" width="3" alt="" /></td>
                                    <td class="dockTop">
                                    </td>
                                    <td>
                                        <img src="Images/DockTopRight.gif" height="3" width="3" alt="" /></td>
                                </tr>
                                <tr>
                                    <td class="middleLeft">
                                        &nbsp;</td>
                                    <td class="toolsContainer" style="padding-top: 0px;">
                                        <table cellpadding="0" cellspacing="0" class="innerTable">
                                            <tr>
                                                <td>
                                                    <ul class="mostUsedCommand">
                                                        <li><a href="javascript:;" title="Mail">
                                                            <img src="Images/Envelope_32x32.gif" height="32" width="32" alt="Mail" /><span>Mail</span><span
                                                                class="last"><img src="Images/MostUsedCommandArrow.gif" width="5" height="4" alt="" /></span></a>
                                                        </li>
                                                        <li><a href="javascript:;" title="Labels">
                                                            <img src="Images/Labels_32x32.gif" height="32" width="32" alt="Labels" /><span>Labels</span><span
                                                                class="last"><img src="Images/MostUsedCommandArrow.gif" width="5" height="4" alt="" /></span></a>
                                                        </li>
                                                        <li><a href="javascript:;" title="People">
                                                            <img src="Images/Recepients_32x32.gif" height="32" width="32" alt="People" /><span>People</span><span
                                                                class="last"><img src="Images/MostUsedCommandArrow.gif" width="5" height="4" alt="" /></span></a>
                                                        </li>
                                                        <li><a href="javascript:;" title="Merge">
                                                            <img src="Images/MailMerge_32x32.gif" height="32" width="32" alt="Merge" /><span>Merge</span><span
                                                                class="last"><img src="Images/MostUsedCommandArrow.gif" width="5" height="4" alt="" /></span></a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="middleRight">
                                        &nbsp;</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="Images/DockBottomLeft.gif" height="16" width="3" alt="" /></td>
                                    <td class="dockTitle">
                                        <div class="titleText">
                                            Email</div>
                                        <div class="dockGrip">
                                        </div>
                                    </td>
                                    <td>
                                        <img src="Images/DockBottomRight.gif" height="16" width="3" alt="" /></td>
                                </tr>
                            </table>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </div>
                <div class="applicationBottom">
                </div>
            </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