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

Render Modes

Skinned Form Controls (<H4>)

Decoration zone
Select Your Favorite Styles (<H5>):
Select Age (<H5>):
Select Genre (<H5>)
Text Boxes
 
 
Textarea
  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size * 2.27 KB 2.45 KB
CSS Size 27.47 KB 17.7 KB
Image Sprite Size ** 18.65 KB 22.62 KB

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

  • Classic rendering is the long-standing rendering mode of the control in which its layout is often implemented using table elements.
  • Lightweight rendering leverages HTM5 and CSS3, but the control may lose its rounded corners, gradients and shadows in non-modern browsers. With this rendering, 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 RadFormDecorator 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 RadFormDecorator 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 is obtained through the dev toolbar of the browser, because the additions from RadFormDecorator are created with JavaScript. The HTML that is measured is just the contents of the div with the sample on the left (fieldsets, dropdowns, textboxes, etc.). The HTML size in the table reflects the change in this div's contents for the given page, compared with the same div when RadFormDecorator is not used. It may vary with different elements and their size.
** - The image sprites that are loaded are larger in size with Lightweight RenderMode, but they also contain a common sprite that holds elements used by many controls in the suite (e.g., arrows, buttons) and is only needed once. With more controls on the page the benefit is on the side of the Lightweight RenderMode because this resource will be loaded only once. Also, the Classic RenderMode has a larger number of image sprites which means more requests.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.FormDecorator.RenderModes.DefaultVB" %>

<!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" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all" DecorationZoneID="decorationZone" />
    <div class="demo-containers">
        <div class="demo-container" id="decorationZone">
            <h4>Skinned Form Controls (&lt;H4&gt;)</h4>
            <fieldset>
                <legend>Decoration zone</legend>
                <div class="formRow" style="padding-right: 10px; padding-left: 10px;">
                    <h5>Select Your Favorite Styles (&lt;H5&gt;):</h5>
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" TabIndex="1">
                        <asp:ListItem Text="Classic" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Rock" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Jazz and Fusion"></asp:ListItem>
                        <asp:ListItem Text="Rhythm and Blues"></asp:ListItem>
                        <asp:ListItem Text="Hard'n'Heavy"></asp:ListItem>
                    </asp:CheckBoxList>
                </div>
                <div class="formRow" style="padding-right: 16px;">
                    <h5>Select Age (&lt;H5&gt;):</h5>
                    <asp:RadioButtonList ID="RadioButtonList2" runat="server" TabIndex="2">
                        <asp:ListItem Text="below 18"></asp:ListItem>
                        <asp:ListItem Text="18-22"></asp:ListItem>
                        <asp:ListItem Text="23-29" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="30-39"></asp:ListItem>
                        <asp:ListItem Text="40-49"></asp:ListItem>
                        <asp:ListItem Text="50-59"></asp:ListItem>
                        <asp:ListItem Text="60 and above"></asp:ListItem>
                    </asp:RadioButtonList>
                </div>
                <div class="formRow" style="border: 0;">
                    <h5>Select Genre (&lt;H5&gt;) </h5>
                    <div class="selectSeparator"></div>
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="135px" TabIndex="3">
                        <asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:DropDownList>
                    <div class="selectSeparator"></div>
                    <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="false" Height="70px" Width="135px" TabIndex="4">
                        <asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:ListBox>
                    <div class="selectSeparator"></div>
                    <asp:ListBox ID="ListBox2" runat="server" AutoPostBack="false" SelectionMode="Multiple" Height="70px" Width="135px" TabIndex="5">
                        <asp:ListItem Text="Comedy" Value="1" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:ListBox>
                </div>
                <div style="padding-left: 16px; clear: both;">
                    <asp:Button ID="Button1" runat="server" Text="Submit Form" TabIndex="6"></asp:Button>
                </div>
            </fieldset>
            <div>
                <fieldset>
                    <legend>Text Boxes</legend>
                    <label for="<%= UsernameBox.ClientID %>">Username (&lt;label&gt;):&nbsp;</label>
                    <asp:TextBox runat="server" ID="UsernameBox" Width="150px" TabIndex="7"></asp:TextBox>
                    <div>
                        &nbsp;
                    </div>
                    <label for="<%= PasswordBox.ClientID %>">Password (&lt;label&gt;):&nbsp;</label>
                    <asp:TextBox runat="server" TextMode="Password" ID="PasswordBox" Width="150px" TabIndex="8"></asp:TextBox>
                    <div>
                        &nbsp;
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Textarea</legend>
                    <asp:TextBox ID="TextArea1" Style="margin-left: 6px; margin-bottom: 2px; height: 70px; width: 240px;"
                        runat="server" TextMode="MultiLine" Text="Enter Text..." Rows="4" TabIndex="9"
                        Columns="20"></asp:TextBox>
                </fieldset>
            </div>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" Title="Render mode comparison">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Render mode" Size="Narrow">
                    <qsf:RadioButtonList ID="cbChooseRenderMode" runat="server" AutoPostBack="True"
                        OnSelectedIndexChanged="cbChooseRenderMode_SelectedIndexChanged"
                        CssClass="fb-group" RepeatLayout="UnorderedList">
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>
                        <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Classic vs. Light rendering"  Size="Wide">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Classic</th>
                                <th>Lightweight</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <th>Markup Size *</th>
                                <td>2.27 KB </td>
                                <td>2.45 KB </td>
                            </tr>
                            <tr>
                                <th>CSS Size</th>
                                <td>27.47 KB</td>
                                <td>17.7 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size **</th>
                                <td>18.65 KB</td>
                                <td>22.62 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance