RibbonBar - Render Modes

  • 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 ImageShapes Item ImageSmartArtItem ImageChart
Illustrations
Item ImageHyperlinkItem ImageBookmarkItem ImageCross-reference
Links
Item ImageMacros 
  • Item ImageView Macros
  • Item ImageRecord Macro...
Macros

Render mode comparison

Render Mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 53.22 KB 45.11 KB
CSS Size 32.4 KB 12.6 KB
Image Sprite Size 6.8 KB 30.9 KB*
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo showcases the two different rendering modes of Telerik's ASP.NET RadRibbonBar control: Classic and Lightweight.

  • Classic rendering is the long-standing rendering mode of the control.
  • Lightweight rendering leverages HTM5 and CSS3, but the control may lose its rounded corners, gradients and shadows in non-modern browsers.

There is also a Native render mode option inherited directly from RenderMode. As RadRibbonBar does not have a specific HTML element, the Native render mode will have the same effect as the Classic one.

The default render mode of the control is Classic and you have the option to either explicitly set it to Lightweight or leverage the Auto mode to have the control choose the best rendering based on the user's browser.

Note: In order to provide optimal experience for your end users, we recommend that you use only one type of render mode for a control on a given page. For example, if you have two instances of RadFormDecorator on the page, it will be best if both of them use the same render mode.

Note: The Material skin is available only for the modern Lightweight render mode. Change the skin or the mode to properly visualize the demonstrated control.

Notes on the statistics:
The markup size is calculated automatically in the code-behind by rendering a simple RadRibbonBar instance on a blank page.
*The image sprite that causes the increase in size is a common one, used by various Telerik controls on the page, so with more controls the benefits will be more apparent.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="RibbonBar.Examples.RenderModes.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link 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" />
    <div class="demo-container">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" EnableQuickAccessToolbar="true">
            <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="172">
                                        <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" Width="80" Suffix=" pt" />
                                    <telerik:RibbonBarComboBox Width="60">
                                        <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:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="../../Images/Icons/insert/Shapes.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Triangle">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Square">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Rectangle">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Hexagon">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Circle">
                                    </telerik:RibbonBarMenuItem>
                                </Items>
                            </telerik:RibbonBarMenu>
                            <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:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Render mode comparison">
        <Views>
            <qsf:View>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Render Mode" Size="Narrow">
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" RepeatLayout="UnorderedList" CssClass="fb-group">
                        <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide" Title="Classic vs. Light rendering">
                    <table class="table" cellspacing="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>Markup Size</th>
                                <td>
                                    <asp:Label ID="ClassicSize" runat="server"></asp:Label></td>
                                <td>
                                    <asp:Label ID="LightweightSize" runat="server"></asp:Label></td>
                            </tr>
                            <tr>
                                <th>CSS Size</th>
                                <td>32.4 KB</td>
                                <td>12.6 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>6.8 KB</td>
                                <td>30.9 KB*</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>


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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?