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

Render Modes

November 2024
November 2024
 SMTWTFS
44272829303112
453456789
4610111213141516
4717181920212223
4824252627282930
491234567
  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 8.75 KB 9.66 KB
CSS Size 7.20 KB 7.45 KB
Image Sprite Size 1.66 KB 1.66 KB

This demo showcases the two different rendering modes of Telerik's ASP.NET Calendar control: 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.

There is also a Native render mode option inherited directly from RenderMode. As RadCalendar 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 RadCalendar on the page, it will be best if both of them use the same render mode.

Lightweight Rendering yields completely different markup making maximum use of semantic HTML and CSS3, which makes the control's appearance much easier to customize. This means that we no longer use table elements for building the layout of the control. From semantic point of view, the table tag is designed for presenting tabular data. It has a nested structure and its markup goes three levels deep - table -> tr -> td. Therefore, it is not optimized for building a layout structure. With the Lightweight render mode we use div containers instead. Also, dropping the table elements improves the performance and decreases the amount of data requested from the client browser. This enhancement especially favors mobile devices. The table element for the real calendar part remains, because it is tabular data, which means that the table is the element best optimized for serving this part of RadCalendar.

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
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Calendar.Functionality.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="containerDiv">
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" Style="float: left;"></telerik:RadCalendar>
        </div>
    </div>

    <qsf:ConfiguratorPanel Expanded="true" runat="server" ID="ConfiguratorPanel3" Title="Render mode comparison">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Render mode" runat="server" Size="Narrow">

                    <ul class="fb-group" title="Render mode">

                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Value="Lightweight" Text="Lightweight" Selected="True"></asp:ListItem>
                                <asp:ListItem Value="Classic" Text="Classic"></asp:ListItem>
                            </qsf:RadioButtonList></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Title="Classic vs. Light rendering" runat="server" Size="Wide">
                    <table class="table">
                        <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>7.20 KB</td>
                                <td>7.45 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>1.66 KB</td>
                                <td>1.66 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance