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

Render Modes

  • Render mode comparison
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size 57.01 KB 57.66 KB
CSS Size 71.4 KB 50.5 KB
Image Sprite Size * 27.3 KB 5.5 KB

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

  • Classic mode is the rendering that is used by default. It remains without changes.
  • Lightweight makes use of more semantic HTML and CSS3 and also applies the Lightweight mode to its child controls. In this mode RadFileExplorer is elastic and font icons are used for toolbar and file icons instead of image sprites. This mode is available as of Q3 2015.
  • Mobile rendering will be resolved to Lightweight.

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 RadFileExplorer 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 RadFileExplorer instance on a blank page.
* - The Lightweight RenderMode of RadFileExplorer uses WebFont instead of image sprites for its tools' icons which offer more benefits over the images.

  • DefaultVB.aspx
    • DefaultVB.aspx
    • FileExplorerVB.aspx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • FileExplorerVB.aspx.vb
  • scripts.js
  • fileExplorerStyles.css
    • fileExplorerStyles.css
    • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.FileExplorer.RenderModes.DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
    <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" />
    <div id="demo-container" class="demo-container">
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" 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>
                                    <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>71.4 KB</td>
                                <td>50.5 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size *</th>
                                <td>27.3 KB</td>
                                <td>5.5 KB</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <script type="text/javascript">
        renderModeDemo.frameSrc = "<%= FrameSrc %>";
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance