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.32 KB 2.32 KB
CSS Size ** 6.14 KB 5.83 KB
Image Sprite Size *** 2.43 KB 0 KB

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

  • Classic rendering is the current HTML rendering of the control that uses image sprites for the icons and background gradients.
  • Lightweight rendering uses similar HTML, but no image sprites. The icons are now font icons and not <img> elements, and the background gradients are now CSS gradients instead of an image sprite.

There is also a Native render mode option inherited directly from RenderMode. As RadDock 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 RadNotification 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, minified and saved as a file to determine its actual size. There is no difference because the HTML rendering itself is not changed greatly, as it was semantic and as lightweight as possible to begin with.
** - The CSS size only counts the RadNotification CSS and does not include the RadMenu stylesheets. To further improve performance, set its Visible property to false, if you are not using it: <NotificationMenu> Visible="false" />.
*** - The Lightweight RenderMode does not use any image sprites and produces the icons via the font many Telerik controls use, so it is downloaded only once per user.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Notification.RenderModes.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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>
</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-wide">
        <div class="demo-container size-narrow" style="text-align: center;">
            <p>
                <asp:Label ID="Label1" Text="Display the Notification with the chosen RenderMode" AssociatedControlID="RadButton1" runat="server" />
            </p>
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" Text="Show Notification" runat="server" />
        </div>
        <telerik:RadNotification RenderMode="Lightweight" runat="server" ID="RadNotification1" Position="Center" Width="400px" Height="200px" VisibleOnPageLoad="true" AutoCloseDelay="0"
            Text="The Lightweight RenderMode uses font icons and CSS gradients instead of image sprites for the icons and backgrounds." ContentScrolling="Auto">
        </telerik:RadNotification>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Title="Render mode comparison">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Render mode" Size="Narrow">
                    <qsf:RadioButtonList ID="cbChooseRenderMode" runat="server" AutoPostBack="True"
                        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" Size="Wide" Title="Classic vs. Light rendering">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>Markup Size *</th>
                                <td>2.32 KB
                                </td>
                                <td>2.32 KB
                                </td>
                            </tr>
                            <tr>
                                <th>CSS Size **</th>
                                <td>6.14 KB</td>
                                <td>5.83 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size ***</th>
                                <td>2.43 KB</td>
                                <td>0 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance