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

Render Modes

empty
ProfitExpensesCountryCity
CompanyTransportType
empty
BulgariaBulgaria Sum of ProfitBulgaria Sum of Expenses FranceFrance Sum of ProfitFrance Sum of Expenses GreeceGreece Sum of ProfitGreece Sum of Expenses HungaryHungary Sum of ProfitHungary Sum of Expenses ItalyItaly Sum of ProfitItaly Sum of Expenses RomaniaRomania Sum of ProfitRomania Sum of Expenses SpainSpain Sum of ProfitSpain Sum of Expenses UKUK Sum of ProfitUK Sum of ExpensesTotal Sum of ProfitTotal Sum of Expenses
SofiaParisAthensKavalaSzegedBresciaArgesBucharestMadridBrandon
Sum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of ExpensesSum of ProfitSum of Expenses
empty
Advanced Services AceMicrovan
Minivan
Pickup
Truck
Van
Advanced Services Ace Total
Continential World CorpMicrovan
Minivan
Pickup
Truck
Grand Total
empty
59450.0093446.4059450.0093446.40127817.50146225.76127817.50146225.76133762.5060615.5453505.0019451.88187267.5080067.4244587.5014173.2044587.5014173.2029725.0010527.6029725.0010527.6059450.0033814.8065395.0091087.92124845.00124902.7262422.50100462.3262422.50100462.3253505.005658.1253505.005658.12689620.00575463.54
105165.00126152.64105165.00126152.64124640.00107790.72124640.00107790.72120745.0042642.3670110.0019451.88190855.0062094.24105165.0025511.76105165.0025511.7685690.0023160.7285690.0023160.7254530.0023670.3662320.0066245.76116850.0089916.1262320.0076542.7262320.0076542.7289585.007229.8289585.007229.82880270.00518398.74
54530.0088774.0854530.0088774.08111930.00127224.00111930.00127224.00109060.0052820.2866010.0024855.18175070.0077675.4645920.0015118.0845920.0015118.0863140.0023160.7263140.0023160.7240180.0023670.3686100.00124210.80126280.00147881.1657400.0095678.4057400.0095678.4048790.005343.7848790.005343.78683060.00580855.68
261170.00121480.32261170.00121480.32381710.00139057.32381710.00139057.32542430.0076959.36231035.0024855.18773465.00101814.54160720.0015118.08160720.0015118.08140630.0014738.64140630.0014738.64251125.0042268.50160720.0066245.76411845.00108514.26220990.00105246.24220990.00105246.24251125.007858.50251125.007858.502601655.00613827.90
150675.0098118.72150675.0098118.72287000.00126446.52287000.00126446.52229600.0043172.46172200.0025935.84401800.0069108.30136325.0017952.72136325.0017952.72107625.0015791.40107625.0015791.40121975.0028742.5893275.0053824.68215250.0082567.26121975.0081326.64121975.0081326.64143500.006286.80143500.006286.801564150.00497598.36
630990.00527972.16630990.00527972.161033097.50646744.321033097.50646744.321135597.50276210.00592860.00114549.961728457.50390759.96492717.5087873.84492717.5087873.84426810.0087379.08426810.0087379.08527260.00152166.60467810.00401614.92995070.00553781.52525107.50459256.32525107.50459256.32586505.0032377.02586505.0032377.026418755.002786144.22
65395.00102791.0465395.00102791.04154570.00191743.68154570.00191743.68101065.0046615.3262422.5022693.86163487.5069309.1865395.0020787.3665395.0020787.3632697.5011580.3632697.5011580.3644587.5025361.1047560.0066245.7692147.5091606.8665395.00105246.2465395.00105246.2432697.503457.7432697.503457.74671785.00596522.46
109060.00130824.96109060.00130824.96148010.00119709.60148010.00119709.60171380.0060085.4470110.0019451.88241490.0079537.3293480.0022677.1293480.0022677.1289585.0024213.4889585.0024213.4870110.0030433.3250635.0053824.68120745.0084258.00116850.00143517.60116850.00143517.6062320.005029.4462320.005029.44981540.00609767.52
43050.0070084.8043050.0070084.80134890.00167991.48134890.00167991.48132020.0063868.6874620.0028097.16206640.0091965.8454530.0017952.7254530.0017952.7257400.0021055.2057400.0021055.2051660.0030433.3254530.0078666.84106190.00109100.1666010.00110030.1666010.00110030.1668880.007544.1668880.007544.16737590.00595724.52
241080.00112135.68241080.00112135.68351575.00130333.92351575.00130333.92301350.0040410.36120540.0012967.92421890.0053378.28150675.0014173.20150675.0014173.20170765.0017896.92170765.0017896.92180810.0030433.32150675.0062105.40331485.0092538.72130585.0062190.96130585.0062190.96210945.006601.14210945.006601.142009000.00489248.82
7076087.506069343.687076087.506069343.6813506732.508572818.1213506732.508572818.1213299682.503423000.786820965.001363792.9220120647.504786793.706654812.501182044.886654812.501182044.886488045.001274892.366488045.001274892.366882260.002133713.886511107.504989133.8013393367.507122847.686564920.005869869.846564920.005869869.846957290.00397640.106957290.00397640.1080761902.5035276250.36
Page size:
  • Render Mode
Render mode
Classic vs. Light rendering
Classic Lightweight
Markup Size
CSS Size 31.30 KB 26.04 KB
Image Sprite Size 9.66 KB 0 KB*

This demo showcases the two different rendering modes of Telerik ASP.NET PivotGrid control: Classic and Lightweight.

  • Classic rendering is the long-standing rendering mode of the control, with extensive use of table elements for the layout and images for backgrounds, icons, etc.
  • Lightweight rendering leverages HTM5 and CSS3, but the control may lose its rounded corners, gradients and shadows in non-modern browsers.

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 RadPivotGrid 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 for the currently selected RenderMode, so if you want to compare the markup size of both modes, you could change the selection in RenderMode radio button placed in the demo configurator.

* Lightweight rendering uses shared font icons across all controls (TelerikWebUI).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits=" PivotGrid.Examples.RenderModes.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 rel="stylesheet" type="text/css" href="styles.css" />
</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" runat="server">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad() {
                    var grid = $find("<%=pivotGrid.ClientID%>");
                    var renderMode = grid.get_renderMode();
                    var gridMarkupSize = Math.round((grid.get_element().innerHTML.length / 1024) * 100) / 100 + " KB";
                    document.getElementById("<%=ClassicSize.ClientID%>").innerHTML = renderMode == 1 ? gridMarkupSize : "-";
                    document.getElementById("<%=LightweightSize.ClientID%>").innerHTML = renderMode == 1 ? "-" : gridMarkupSize;
                }
            </script>
        </telerik:RadCodeBlock>

        <asp:Panel EnableViewState="true" runat="server" ID="Panel1">
        </asp:Panel>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Render Mode">
        <Views>
            <qsf:View>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Render mode" Size="Narrow">
                    <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" CssClass="fb-group">
                         <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem>
                        <asp:ListItem Value="Classic">Classic</asp:ListItem>                       
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide" Title="Classic vs. Light rendering">
                    <table class="table" cellspacing="0">
                        <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>31.30 KB</td>
                                <td>26.04 KB</td>
                            </tr>
                            <tr>
                                <th>Image Sprite Size</th>
                                <td>9.66 KB</td>
                                <td>0 KB*</td>
                            </tr>
                        </tbody>
                    </table>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance