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

Render Modes

Allow custom text

ReadOnly

  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight Native
Markup Size 1.66 KB 2.11 KB 1.00 KB
CSS Size 17.27 KB 19.5 KB 0 B
Image Sprite Size 8.43 KB 1.9 KB 0 B

The demo showcases the three different rendering modes of Telerik's ASP.NET ComboBox: Classic, Lightweight and Native.

  • Classic rendering is the long-standing rendering mode of the control in which its layout is implemented using a table element.
  • Lightweight rendering leverages HTM5 and CSS3 to deliver less HTML to the browser, 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 input and button.
  • Native rendering causes RadComboBox to render on the page as a select element with option elements representing its items. This comes handy on mobile devices, because RadComboBox would have the native mobile behavior

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 page. For example, if you have two instances of RadComboBox 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.

Note on the statistics:
The markup size is calculated automatically in the code-behind by rendering a simple RadComboBox instance on a blank page.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Inherits="ComboBox.Examples.Functionality.RenderModes.DefaultCS" Language="c#"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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-thin">
        <h2>Allow custom text</h2>
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="100%" AllowCustomText="true">
            <Items>
                <telerik:RadComboBoxItem Text="RadComboBoxItem1" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem2" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem3" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem4" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem5" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem6" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem7" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem8" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem9" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem10" />
            </Items>
        </telerik:RadComboBox>
    </div>

    <div class="demo-container size-thin">
        <h2>ReadOnly</h2>
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Width="100%" AllowCustomText="false">
            <Items>
                <telerik:RadComboBoxItem Text="RadComboBoxItem1" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem2" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem3" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem4" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem5" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem6" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem7" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem8" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem9" />
                <telerik:RadComboBoxItem Text="RadComboBoxItem10" />
            </Items>
        </telerik:RadComboBox>
    </div>



    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <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="Lightweight" Selected="True">Lightweight</asp:ListItem>
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>
                        <asp:ListItem Value="Native">Native</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Title="Classic vs. Light rendering" Size="Wide">
                    <table class="table" cellspacing="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                                <th>Native</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>
                                <td>
                                    <asp:Label ID="NativeSize" runat="server"></asp:Label></td>
                            </tr>
                            <tr>
                                <th>CSS Size</th>
                                <td>17.27 KB</td>
                                <td>19.5 KB</td>
                                <td>0 B</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>8.43 KB</td>
                                <td>1.9 KB</td>
                                <td>0 B</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance