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

    Render Modes

    • RadListBoxItem1
    • RadListBoxItem2
    • RadListBoxItem3
    • RadListBoxItem4
    • RadListBoxItem5
    • RadListBoxItem6
    • RadListBoxItem7
    • RadListBoxItem8
    • RadListBoxItem9
    • RadListBoxItem10
    • Render mode comparison
    Render mode
    Classic vs. Light rendering
    Classic Lightweight
    Markup Size 3.38 KB 3.36 KB
    CSS Size 20.6 KB 13.05 KB
    Image Sprite Size 2.78 KB 17.8 KB*

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

    • Classic rendering is the long-standing rendering mode of the control in which its navigation buttons layout is implemented using a table element and text in the items is surrounded by span element.
    • Lightweight rendering leverages HTM5 and CSS3, but the control may lose its rounded corners, gradients and shadows in non-modern browsers.

    There is also a Native render mode option inherited directly from RenderMode. As RadListBox 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 RadListBox 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 RadListBox instance on a blank page.

    * Lightweight rendering uses a global sprite for icons which is shared across all controls.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.RenderModes.DefaultCS" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
     
    <!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-narrow">
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" Height="200px" Width="200px"
                AllowTransfer="true" TransferToID="RadListBoxDestination">
                <Items>
                    <telerik:RadListBoxItem Text="RadListBoxItem1" />
                    <telerik:RadListBoxItem Text="RadListBoxItem2" />
                    <telerik:RadListBoxItem Text="RadListBoxItem3" />
                    <telerik:RadListBoxItem Text="RadListBoxItem4" />
                    <telerik:RadListBoxItem Text="RadListBoxItem5" />
                    <telerik:RadListBoxItem Text="RadListBoxItem6" />
                    <telerik:RadListBoxItem Text="RadListBoxItem7" />
                    <telerik:RadListBoxItem Text="RadListBoxItem8" />
                    <telerik:RadListBoxItem Text="RadListBoxItem9" />
                    <telerik:RadListBoxItem Text="RadListBoxItem10" />
                </Items>
            </telerik:RadListBox>
            <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBoxDestination" Height="200px" Width="200px">
            </telerik:RadListBox>
        </div>
     
        <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Render mode comparison">
            <Views>
                <qsf:View>
     
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Render mode" Size="Narrow">
                        <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" CssClass="fb-group">
                            <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                            <asp:ListItem Value="Classic">Classic</asp:ListItem>
                        </qsf:RadioButtonList>
                    </qsf:ConfiguratorColumn>
     
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide" Title="Classic vs. Light rendering">
                        <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>20.6 KB</td>
                                    <td>13.05 KB</td>
                                </tr>
                                <tr>
                                    <th>Image Sprite Size</th>
                                    <td>2.78 KB</td>
                                    <td>17.8 KB*</td>
                                </tr>
                            </tbody>
                        </table>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance