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

Render Modes

  • Render mode
Change Render Mode
Lightweight vs. Classic Rendering
Classic Lightweight
Markup Size
  • RadDatePicker
  • RadTimePicker
  • RadDateTimePicker
CSS Size 7.29 KB 4.79 KB
Image Sprite 2.16 KB 0 KB*

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

  • Classic rendering is the long-standing rendering mode of the control in which its layout is implemented using table elements.
  • Lightweight rendering leverages HTM5 and CSS3 to deliver semantic HTML to the browser, but the control may lose its rounded corners, gradients and shadows in non-modern browsers. With this rendering, some table elements in the control layout are replaced with generic elements, such as div and span.

The default render mode of the controls 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 RadDatePicker 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 RadCalendar instance on a blank page with the settings from its configurator panels.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Pickers.RenderMode.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 href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {

                var datePicker = $find("<%=RadDatePicker1.ClientID%>");
                var datePickerCalendar = document.getElementById("<%= RadDatePicker1.ClientID%>" + "_calendar");
                var timePicker = $find("<%=RadTimePicker1.ClientID%>");
                var dateTimePicker = $find("<%=RadDateTimePicker1.ClientID%>");
                var renderMode = datePicker.get_renderMode();
                var datePickerMarkupSize = (Math.round((((datePicker.get_element().parentNode.innerHTML.length) + (datePickerCalendar.innerHTML.length)) / 1024) * 100) / 100 + " KB");
                var timePickerMarkupSize = Math.round((((timePicker.get_element().parentNode.innerHTML.length) + (timePicker.get_timeView().get_element().innerHTML.length)) / 1024) * 100) / 100 + " KB";
                var dateTimePickerMarkupSize = Math.round((((dateTimePicker.get_element().parentNode.innerHTML.length) + (datePickerCalendar.innerHTML.length) + (timePicker.get_timeView().get_element().innerHTML.length)) / 1024) * 100) / 100 + " KB";

                document.getElementById("<%=ClassicSizeDatePicker.ClientID%>").innerHTML = renderMode == 1 ? datePickerMarkupSize : "-";
                document.getElementById("<%=LightweightSizeDatePicker.ClientID%>").innerHTML = renderMode == 1 ? "-" : datePickerMarkupSize;

                document.getElementById("<%=ClassicSizeTimePicker.ClientID%>").innerHTML = renderMode == 1 ? timePickerMarkupSize : "-";
                document.getElementById("<%=LightweightSizeTimePicker.ClientID%>").innerHTML = renderMode == 1 ? "-" : timePickerMarkupSize;

                document.getElementById("<%=ClassicSizeDateTimePicker.ClientID%>").innerHTML = renderMode == 1 ? dateTimePickerMarkupSize : "-";
                document.getElementById("<%=LightweightSizeDateTimePicker.ClientID%>").innerHTML = renderMode == 1 ? "-" : dateTimePickerMarkupSize;
            }
        </script>
    </telerik:RadCodeBlock>
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="Div2">

            <div class="controls">
                <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="RadDatePicker1" Width="100%">
                </telerik:RadDatePicker>
            </div>
            <div class="controls">
                <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Width="100%" runat="server"></telerik:RadTimePicker>
            </div>
            <div class="controls">
                <telerik:RadDateTimePicker RenderMode="Lightweight" runat="server" ID="RadDateTimePicker1" Width="100%">
                </telerik:RadDateTimePicker>
            </div>

        </div>
    </div>
    <qsf:ConfiguratorPanel Expanded="true" runat="server" ID="ConfiguratorPanel1" Title="Render mode">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Change Render Mode" runat="server" Size="Medium">

                    <ul class="fb-group">

                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Value="Lightweight" Selected="True" Text="Lightweight"></asp:ListItem>
                                <asp:ListItem Value="Classic"  Text="Classic"></asp:ListItem>
                            </qsf:RadioButtonList></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Title="Lightweight vs. Classic Rendering" runat="server" Size="Wide">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th><span>Markup Size</span>
                                    <ul class="removeDots">
                                        <li>RadDatePicker</li>
                                        <li>RadTimePicker</li>
                                        <li>RadDateTimePicker</li>

                                    </ul>
                                </th>
                                <td>
                                    <ul class="removeDots moveDown">
                                        <li>
                                            <asp:Label ID="ClassicSizeDatePicker" runat="server"></asp:Label></li>
                                        <li>
                                            <asp:Label ID="ClassicSizeTimePicker" runat="server"></asp:Label></li>
                                        <li>
                                            <asp:Label ID="ClassicSizeDateTimePicker" runat="server"></asp:Label></li>

                                    </ul>
                                </td>
                                <td>
                                    <ul class="removeDots moveDown">
                                        <li>
                                            <asp:Label ID="LightweightSizeDatePicker" runat="server"></asp:Label></li>
                                        <li>
                                            <asp:Label ID="LightweightSizeTimePicker" runat="server"></asp:Label></li>
                                        <li>
                                            <asp:Label ID="LightweightSizeDateTimePicker" runat="server"></asp:Label></li>

                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th>CSS Size</th>
                                <td>7.29 KB</td>
                                <td>4.79 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite</th>
                                <td>2.16 KB</td>
                                <td>0 KB*</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance