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

    Render Modes

    Words: 265   Characters: 1630 
     
    • Render mode comparison
    Render mode
    Classic vs. Light rendering
    Classic Lightweight
    Markup Size 97.72 KB 101.05 KB
    CSS Size 86.8 KB 55.3 KB
    Image Sprite Size * 56.2 KB 72.5 KB

    This demo showcases the different rendering modes of Telerik's ASP.NET Editor control: Classic and Lightweight. You can see the Mobile RenderMode in the demo site optimized for touch devices.

    • Classic rendering is the long-standing rendering mode of the control in which its layout is implemented using table elements.
    • Lightweight rendering leverages HTM5 and CSS3 to deliver semantic HTML to the browser, but the control may lose its rounded corners, gradients and shadows in non-modern browsers. With this rendering, some table elements in the control layout are replaced with generic elements, such as div and span.
    • Mobile rendering that targets phone devices is available as of Q2 2015. It uses the flex CSS model to provide optimal user experience. You can test it in the Editor for ASP.NET AJAX Mobile and Touch Capabilities demo. More information on this rendering is available in the control's mobile support documentation.

    Note: Currently, The RibbonBar ToolbarMode is not supported in Lightweight rendering mode.

    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 RadEditor 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 RadEditor instance on a blank page.
    * - The Lightweight RenderMode of RadEditor uses WebFont instead of image sprites for its tools' icons which offer more benefits over the images.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Editor.RenderModes.DefaultCS" Theme="Default"CodeFile="DefaultCS.aspx.cs"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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" />
        <div class="demo-container size-custom">
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"  SkinID="DefaultSetOfTools" Width="850px">
            </telerik:RadEditor>
        </div>
     
        <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Render mode comparison">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn runat="server" Title="Render mode" Size="Narrow">
                        <qsf:RadioButtonList ID="cbChooseRenderMode" runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="cbChooseRenderMode_SelectedIndexChanged"
                            CssClass="fb-group" RepeatLayout="UnorderedList">
                            <asp:ListItem Value="Classic">Classic</asp:ListItem>
                            <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                        </qsf:RadioButtonList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Classic vs. Light rendering" Size="Wide">
                        <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>86.8 KB</td>
                                    <td>55.3 KB</td>
                                </tr>
                                <tr>
                                    <th>Image Sprite Size *</th>
                                    <td>56.2 KB</td>
                                    <td>72.5 KB</td>
                                </tr>
                            </tbody>
                        </table>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
     
     
     
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance