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
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 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