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

Render Modes

Split Button
  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 18.64 KB 23.10 KB
CSS Size 32.1 KB 10.3 KB
Image Sprite Size * 104.7 KB 0 KB

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

  • Classic rendering is the long-standing rendering mode of the control.
  • Lightweight rendering leverages CSS3 to deliver semantic HTML to the browser, but the control may lose its rounded corners, gradients and shadows in non-modern browsers.

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 RadButton on the page, it will be best if both of them use the same render mode.

Notes on the statistics:
The markup size is calculated automatically in the code-behind by rendering each of the displayed RadButton types on a blank page.
* - The Lightweight RenderMode of RadButton uses WebFont instead of image sprites for its embedded icons which offers more benefits over the images.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Button.RenderModes.DefaultCS" %>

<%@ 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" type="text/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-containers">
        <div class="demo-container">
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnStandard" runat="server" 
                    Text="Standard Button" AutoPostBack="false">
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnIcons" runat="server" 
                    Text="Standard Button With Two Icons" AutoPostBack="false">
                    <Icon PrimaryIconCssClass="rbNext" SecondaryIconCssClass="rbPrevious"></Icon>
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnLink" runat="server"  ButtonType="LinkButton"
                    Text="Link Button" AutoPostBack="false">
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" EnableSplitButton="true" ID="btnSplitButton" 
                    runat="server" Text="Split Button" AutoPostBack="false">
                </telerik:RadButton>
            </div>
        </div>
        <div class="demo-container attached">
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnCheckbox" runat="server" 
                    Text="Checkbox Button" ButtonType="ToggleButton" ToggleType="CheckBox"
                    AutoPostBack="false">
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnThreeStateCheckbox" runat="server" ButtonType="ToggleButton"
                    ToggleType="CustomToggle" AutoPostBack="false" >
                    <ToggleStates>
                        <telerik:RadButtonToggleState Text="Unchecked" PrimaryIconCssClass="p-i-checkbox rbToggleCheckbox"></telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    </ToggleStates>
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnRadio1" runat="server" 
                    Text="Radio Button 1" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" GroupName="RadioButtons">
                </telerik:RadButton>
            </div>
            <div class="btn-wrapper">
                <telerik:RadButton RenderMode="Lightweight" ID="btnRadio2" runat="server" 
                    Text="Radio Button 2" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" GroupName="RadioButtons">
                </telerik:RadButton>
            </div>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" Title="Render mode comparison" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Render mode"
                    Size="Narrow">
                    <qsf:RadioButtonList ID="rblChooseRenderMode" runat="server" AutoPostBack="True"
                        OnSelectedIndexChanged="rblChooseRenderMode_SelectedIndexChanged">
                        <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>32.1 KB</td>
                                <td>10.3 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size *</th>
                                <td>104.7 KB</td>
                                <td>0 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance