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

Server-side

  • File
  • Home
  • Insert
  • View
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
  • 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
Styles
Item ImageFind 
  • Item ImageFind...
  • Item ImageGo to...
Item ImageReplaceItem ImageSelect 
Editing
Item ImagePictureItem ImageClip ArtItem ImageShapesItem ImageSmartArtItem ImageChart
Illustrations
Item ImageHyperlinkItem ImageBookmarkItem ImageCross-reference
Links
Item ImageZoomItem Image100%Item ImageOne PageItem ImageTwo PagesItem ImagePage Width
Zoom
Item ImageMacros 
  • Item ImageView Macros
  • Item ImageRecord Macro...
Macros
Event log

RadRibbonBar exposes the following server-side events:

ApplicationMenuItemClick - Raised when an application menu item is clicked.
SelectedTabChange - Raised when a non-selected tab is clicked.
ButtonClick - Raised when a Button is clicked.
SpiltButtonClick - Raised when a SplitButton item is clicked.
MenuButtonClick - Raised when a Menu Button is clicked.
ButtonToggle - Raised when a ToggleButton is toggled.
ToggleListToggle - Raised when a ToggleButton inside a ToggleList is toggled.
OnDropDownSelectedIndexChanged - Raised when the selected index of a DropDown is changed.
OnComboBoxSelectedIndexChanged - Raised when the selected index of a ComboBox is changed.
OnComboBoxTextChanged - Raised when the Text of a ComboBox is changed.
OnNumericTextBoxValueChanged - Raised when the Value of a NumericTextBox is changed.
OnColorPickerColorChanged - Raised when the SelectedColor of a ColorPIcker is changed.
OnGalleryCommand - Raised when a GalleryItem inside a Gallery is clicked.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="RibbonBar.Examples.Events.ServerSide.DefaultVB" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadRibbonBar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRibbonBar1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="EventLogConsole1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container size-wide">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" EnableQuickAccessToolbar="true" Skin="Default"
            OnSelectedTabChange="RadRibbonBar1_SelectedTabChange" OnApplicationMenuItemClick="RadRibbonBar1_ApplicationMenuItemClick"
            OnButtonClick="RadRibbonBar1_ButtonClick" OnSplitButtonClick="RadRibbonBar1_SplitButtonClick"
            OnMenuItemClick="RadRibbonBar1_MenuItemClick" OnLauncherClick="RadRibbonBar1_LauncherClick"
            OnButtonToggle="RadRibbonBar1_ButtonToggle" OnToggleListToggle="RadRibbonBar1_ToggleListToggle"
            OnDropDownSelectedIndexChanged="RadRibbonBar1_DropDownSelectedIndexChanged"
            OnComboBoxSelectedIndexChanged="RadRibbonBar1_ComboBoxSelectedIndexChanged"
            OnComboBoxTextChanged="RadRibbonBar1_ComboBoxTextChanged"
            OnNumericTextBoxValueChanged="RadRibbonBar1_NumericTextBoxValueChanged"
            OnColorPickerColorChanged="RadRibbonBar1_ColorPickerColorChanged"
            OnGalleryCommand="RadRibbonBar1_GalleryCommand">
            <ApplicationMenu Text="File">
                <Items>
                    <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="../../../Images/Icons/file/New.png" />
                    <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="../../../Images/Icons/file/Open.png" />
                    <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="../../../Images/Icons/file/Save.png" />
                    <telerik:RibbonBarApplicationSplitMenuItem Text="Save As" ImageUrl="../../../Images/Icons/file/SaveAs.png" Header="Save document as">
                        <Items>
                            <telerik:RibbonBarApplicationMenuItem Text="Word Document (*.docx)" ImageUrl="../../../Images/Icons/file/Document.png" />
                            <telerik:RibbonBarApplicationMenuItem Text="Word 97-2003 Document (*.doc)" ImageUrl="../../../Images/Icons/file/Document.png" />
                            <telerik:RibbonBarApplicationMenuItem Text="PDF (*.pdf)" ImageUrl="../../../Images/Icons/file/Document.png" />
                            <telerik:RibbonBarApplicationMenuItem Text="Web Page (*.htm;*.html)" ImageUrl="../../../Images/Icons/file/Document.png" />
                            <telerik:RibbonBarApplicationMenuItem Text="Plain Text (*.txt)" ImageUrl="../../../Images/Icons/file/Document.png" />
                        </Items>
                    </telerik:RibbonBarApplicationSplitMenuItem>
                    <telerik:RibbonBarApplicationMenuItem Text="Close" ImageUrl="../../../Images/Icons/file/Close.png" />
                </Items>
                <AuxiliaryPane Header="Recent Documents">
                    <ContentTemplate>
                        <ol>
                            <li>Document 1.doc</li>
                            <li>Document 2.doc</li>
                            <li>Document 3.doc</li>
                            <li>Document 4.doc</li>
                            <li>Document 5.doc</li>
                        </ol>
                    </ContentTemplate>
                </AuxiliaryPane>
            </ApplicationMenu>
            <Tabs>
                <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 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:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarDropDown Width="132">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="Arial" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Comic Sans" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Tahoma" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Verdana" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Times New Roman" Selected="true" />
                                        </Items>
                                    </telerik:RibbonBarDropDown>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarNumericTextBox Value="0.3" Step="0.1" Suffix=" pt" />
                                    <telerik:RibbonBarComboBox Width="44">
                                        <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:RibbonBarColorPicker SelectedColor="Red"></telerik:RibbonBarColorPicker>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarToggleButton 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 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>
                                </telerik:RibbonBarControlGroup>
                            </telerik:RibbonBarControlGroup>
                        </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="Styles" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarGallery ItemHeight="50px" ItemWidth="60px" Columns="3" ExpandedColumns="4">
                                <telerik:RibbonBarGalleryCategory>
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Normal.png" Text="Normal" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/NoSpacing.png" Text="No Spacing" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Heading1.png" Text="Heading 1" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Heading2.png" Text="Heading 2" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Title.png" Text="Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Subtitle.png" Text="Subtitle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Emphasis.png" Text="Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Strong.png" Text="Strong" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/Quote.png" Text="Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/IntQuote.png" Text="Intense Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/SubReference.png" Text="Subtle Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/IntReference.png" Text="Intense Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/BookTitle.png" Text="Book Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../../Images/Icons/home/styles/ListParagraph.png" Text="List Paragraph" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                        <Items>
                            <telerik:RibbonBarSplitButton QuickAccess="Active" Size="Medium" Text="Find" ImageUrl="../../../Images/Icons/home/Find.png">
                                <Buttons>
                                    <telerik:RibbonBarButton 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 Size="Medium" Text="Replace" ImageUrl="../../../Images/Icons/home/Replace.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarMenu 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:RibbonBarTab Text="Insert">
                    <telerik:RibbonBarGroup Text="Illustrations">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="../../../Images/Icons/insert/Picture.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="../../../Images/Icons/insert/Clipart.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Shapes" ImageUrl="../../../Images/Icons/insert/Shapes.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="../../../Images/Icons/insert/SmartArt.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="../../../Images/Icons/insert/Chart.png">
                            </telerik:RibbonBarButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                        <Items>
                            <telerik:RibbonBarButton QuickAccess="Active" Size="Large" Text="Hyperlink" ImageUrl="../../../Images/Icons/insert/Link.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="../../../Images/Icons/insert/Bookmark.png">
                            </telerik:RibbonBarButton>
                            <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="../../../Images/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 QuickAccess="Active" Size="Large" Text="Zoom" ImageUrl="../../../Images/Icons/view/Zoom.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="../../../Images/Icons/view/100.png">
                                    </telerik:RibbonBarToggleButton>
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="../../../Images/Icons/view/One_Page.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="../../../Images/Icons/view/Two_Pages.png">
                                    </telerik:RibbonBarToggleButton>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="../../../Images/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="../../../Images/Icons/view/Macros.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="View Macros" ImageUrl="../../../Images/Icons/view/Macros.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="../../../Images/Icons/view/Macros_Record.png">
                                    </telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </Tabs>
        </telerik:RadRibbonBar>
    </div>

    <qsf:EventLogConsole runat="server" ID="EventLogConsole1"></qsf:EventLogConsole>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                var eventLog = $telerik.$(".event-log .list-group")[0];
                eventLog.scrollTop = eventLog.scrollHeight;
            }
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance