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

Render Modes

  • Render mode comparison
Render Mode
Classic vs. Light Rendering
Classic Lightweight
Markup Size * 2.59 KB 2.67 KB
CSS Size 18.66 KB 10.09 KB
Image Sprite Size ** 7.26 KB 30.91 KB

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

  • 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, but the control may lose its rounded corners, gradients and shadows in non-modern browsers. With this mode, the control layout is implemented using generic elements, such as div and span, as well as semantic elements for the title (h6).

There is also a Native render mode option inherited directly from RenderMode. As RadWindow 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 RadWindow or RadWindowManager 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 is obtained through the dev toolbar of the browser, because the popup element of the RadWindow is created with JavaScript. The HTML that is measured is just the popup element, where there is a change in the rendering. Apart from length of the HTML string, the semantics, number and nesting of the various elements is also important. In Lightweight mode there are several times less elements that are not nested deeply.
** - 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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Window.InternalContent.DefaultVB" %>

<%@ 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 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">
        <div id="restrictionZone"></div>
        <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" RestrictionZoneID="restrictionZone" runat="server" Width="580" Height="280" VisibleOnPageLoad="true" Title="Lightweight render mode">
            <ContentTemplate>
                <p>
                    The demo demonstrates 2 different rendering modes of RadWindow: Classic and Lightweight.
                </p>
                <ul>
                    <li>
                        <strong>Classic</strong> rendering is the old, well-known rendering mode of the control. The layout of the RadWindow is implemented using <em>table</em> elements.
                    </li>
                    <li>
                        <strong>Lightweight</strong> rendering, as the name implies, is focused on modern browsers with proper CSS support. The control layout is implemented using generic elements, such as <em>div</em> and <em>span</em>, as well as semantic elements for the title <em>(h6)</em>.
                    </li>
                </ul>
                <p>
                    <strong>Note</strong>: It's not recommended to mix <strong>classic</strong> and <strong>lightweight</strong> render modes on the same page. To ease skin transition, some of the class names are the same, thus conflicts with the styles are quite possible. To avoid them, try to use only one type of render mode on the page.
                </p>
            </ContentTemplate>
        </telerik:RadWindow>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Render mode comparison">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Render Mode" Size="Narrow">
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
                        CssClass="fb-group" RepeatLayout="UnorderedList">
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>
                        <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Classic vs. Light Rendering" Size="Wide">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>Markup Size *</th>
                                <td>2.59 KB
                                </td>
                                <td>2.67 KB
                                </td>
                            </tr>
                            <tr>
                                <th>CSS Size</th>
                                <td>18.66 KB</td>
                                <td>10.09 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size **</th>
                                <td>7.26 KB</td>
                                <td>30.91 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>

    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance