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

Render Modes

The Godfather (1972)
Forrest Gump (1994)
The Sixth Sense (1999)
  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 2.22 KB 2.54 KB
CSS Size 5.98 KB 5.79 KB
Image Sprite Size 1.61 KB 0 KB *

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

  • Classic rendering is the long-standing rendering mode of the control in which background images are used to create the rating stars.
  • Lightweight rendering uses font icons for the rating stars, which makes it easier to customize and print. This also removes the use of image sprites the control. All of this decreases the overall size and complexity of each skin, including custom ones.

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 RadRating 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 RadRating instance on a blank page.

* Lightweight rendering uses a custom font with icons.

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

<!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-thin">
        <div style="padding: 15px; padding-left: 20px;">
            The Godfather (1972)<telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" ItemCount="5"
                Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
            </telerik:RadRating>
        </div>
        <div style="padding: 15px; padding-left: 20px;">
            Forrest Gump (1994)<telerik:RadRating RenderMode="Lightweight" ID="RadRating2" runat="server" ItemCount="5"
                Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
            </telerik:RadRating>
        </div>
        <div style="padding: 15px; padding-left: 20px;">
            The Sixth Sense (1999)<telerik:RadRating RenderMode="Lightweight" ID="RadRating3" runat="server" ItemCount="5"
                Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
            </telerik:RadRating>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Title="Render mode comparison">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Render mode" runat="server" 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 ID="ConfiguratorColumn2" 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>5.98 KB</td>
                                <td>5.79 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>1.61 KB</td>
                                <td>0 KB *</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance