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

Render Modes

  • File
    • New
    • Open
    • Save
    • Save As
    • Print Preview
    • Print
    • Close
  • Edit
    • Undo
    • Cut
    • Copy
    • Paste
    • Clipboard...
  • Insert
    • Break...
    • Page Numbers...
    • Date and Time...
    • Field...
    • Symbol...
    • Comment
    • Picture
    • Diagram
    • Text Box
    • Hyperlink
  • Format
    • Font
      • Arial
      • Verdana
      • Tahoma
      • Sans-serif
      • Arial
      • Arial Black
      • Arial Narrow
      • Arial Unicode MS
      • Bookman Old Style
      • Bookshelf Symbol 7
      • Century
      • Century Gothic
      • Comic Sans MS
      • Courier New
      • Garamond
      • Georgia
      • Goudy Old Style
      • Goudy Stout
      • Haettenschweiler
      • Helvetica
      • Impact
      • Imprint MT Shadow
      • Latha
      • Lucida Console
      • Lucida Sans
      • Lucida Sans Typewriter
      • Lucida Sans Unicode
    • Paragraph...
    • Bullets and Numbering...
    • Borders and Shading...
    • Columns
    • Tabs
    • Change Case
    • Background
      • Red
      • Green
      • Blue
      • Yellow
      • White
      • Orange
      • More Colors...
      • Fill Efects...
      • Printed Watermark...
    • Theme
    • Frames
    • Autoformat
  • View
    • Normal
    • Web Layout
    • Print Layout
    • Task Pane
  • Tools
    • Spelling And Grammar...
    • Research...
    • Language
    • Word Count...
    • Track Changes
    • Compare And Merge Documents..
  • Render mode comparison
Render Mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 2.23 KB 2.56 KB
CSS Size 29.6 KB 7.8 KB
Image Sprite Size 2.62 KB 1.9 KB*

This demo showcases the two different rendering modes of Telerik's ASP.NET Menu 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 RadMenu 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 RadMenu instance on a blank page.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Menu.Examples.Functionality.RenderModes.DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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 size-medium">
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadMenuItem Text="File" AccessKey="F">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/11new.gif" Text="New" AccessKey="w" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Open" AccessKey="O" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/13Save.gif" Text="Save" AccessKey="S" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/14SaveAs.gif" Text="Save As" AccessKey="A" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/15printPreview.gif" Text="Print Preview"
                            AccessKey="V" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/16print.gif" Text="Print" AccessKey="P" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/17close.gif" Text="Close" AccessKey="C" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit" AccessKey="E">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/21undo.gif" Text="Undo" AccessKey="U" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/cut.png" Text="Cut" AccessKey="T" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/copy.png" Text="Copy" AccessKey="C" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/paste.png" Text="Paste" AccessKey="P" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/23clipboard.gif" Text="Clipboard..."
                            AccessKey="b" />
                        <telerik:RadMenuItem IsSeparator="True" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Insert" AccessKey="I">
                    <Items>
                        <telerik:RadMenuItem Text="Break..." AccessKey="B" />
                        <telerik:RadMenuItem Text="Page Numbers..." AccessKey="U" />
                        <telerik:RadMenuItem Text="Date and Time..." AccessKey="T" />
                        <telerik:RadMenuItem Text="Field..." AccessKey="F" />
                        <telerik:RadMenuItem Text="Symbol..." AccessKey="S" />
                        <telerik:RadMenuItem Text="Comment" AccessKey="M" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Picture" AccessKey="P" />
                        <telerik:RadMenuItem Text="Diagram" AccessKey="G" />
                        <telerik:RadMenuItem Text="Text Box" AccessKey="X" />
                        <telerik:RadMenuItem Text="Hyperlink" AccessKey="I" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Format" AccessKey="O">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/26Font.gif" Text="Font" GroupSettings-Height="200">
                            <Items>
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Verdana" />
                                <telerik:RadMenuItem Text="Tahoma" />
                                <telerik:RadMenuItem Text="Sans-serif" />
                                <telerik:RadMenuItem IsSeparator="true" />
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Arial Black" />
                                <telerik:RadMenuItem Text="Arial Narrow" />
                                <telerik:RadMenuItem Text="Arial Unicode MS" />
                                <telerik:RadMenuItem Text="Bookman Old Style" />
                                <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
                                <telerik:RadMenuItem Text="Century" />
                                <telerik:RadMenuItem Text="Century Gothic" />
                                <telerik:RadMenuItem Text="Comic Sans MS" />
                                <telerik:RadMenuItem Text="Courier New" />
                                <telerik:RadMenuItem Text="Garamond" />
                                <telerik:RadMenuItem Text="Georgia" />
                                <telerik:RadMenuItem Text="Goudy Old Style" />
                                <telerik:RadMenuItem Text="Goudy Stout" />
                                <telerik:RadMenuItem Text="Haettenschweiler" />
                                <telerik:RadMenuItem Text="Helvetica" />
                                <telerik:RadMenuItem Text="Impact" />
                                <telerik:RadMenuItem Text="Imprint MT Shadow" />
                                <telerik:RadMenuItem Text="Latha" />
                                <telerik:RadMenuItem Text="Lucida Console" />
                                <telerik:RadMenuItem Text="Lucida Sans" />
                                <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
                                <telerik:RadMenuItem Text="Lucida Sans Unicode" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Paragraph..." AccessKey="P" />
                        <telerik:RadMenuItem Text="Bullets and Numbering..." AccessKey="N" />
                        <telerik:RadMenuItem Text="Borders and Shading..." AccessKey="B" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Columns" AccessKey="C" />
                        <telerik:RadMenuItem Text="Tabs" AccessKey="T" />
                        <telerik:RadMenuItem Text="Change Case" AccessKey="E" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/25BgColor.gif" Text="Background" AccessKey="g">
                            <Items>
                                <telerik:RadMenuItem Text="Red" AccessKey="R" ImageUrl="~/Menu/Images/red.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Green" AccessKey="G" ImageUrl="~/Menu/Images/green.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Blue" AccessKey="B" ImageUrl="~/Menu/Images/blue.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Yellow" AccessKey="Y" ImageUrl="~/Menu/Images/yellow.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="White" AccessKey="W" ImageUrl="~/Menu/Images/white.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Orange" AccessKey="O" ImageUrl="~/Menu/Images/orange.png"></telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="More Colors..." AccessKey="M" />
                                <telerik:RadMenuItem Text="Fill Efects..." AccessKey="F" />
                                <telerik:RadMenuItem ImageUrl="~/Menu/Images/253Watermark.gif" Text="Printed Watermark..."
                                    AccessKey="W" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Theme" AccessKey="H" />
                        <telerik:RadMenuItem Text="Frames" AccessKey="R" />
                        <telerik:RadMenuItem Text="Autoformat" AccessKey="A" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="View" AccessKey="V">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/31normal.gif" Text="Normal" AccessKey="N" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/32web.gif" Text="Web Layout" AccessKey="W" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/33print.gif" Text="Print Layout" AccessKey="P" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/34Tasks.gif" Text="Task Pane" AccessKey="p" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Tools" AccessKey="T">
                    <Items>
                        <telerik:RadMenuItem Text="Spelling And Grammar..." AccessKey="S" />
                        <telerik:RadMenuItem Text="Research..." AccessKey="R" />
                        <telerik:RadMenuItem Text="Language" AccessKey="L" />
                        <telerik:RadMenuItem Text="Word Count..." AccessKey="W" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Track Changes" AccessKey="T" />
                        <telerik:RadMenuItem Text="Compare And Merge Documents.." AccessKey="D" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </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>29.6 KB</td>
                                <td>7.8 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>2.62 KB</td>
                                <td>1.9 KB*</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance