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

Render Modes

ProfitExpenses

CountryCity

Company

TransportType

empty
Bulgaria		Bulgaria Sum of Profit	Bulgaria Sum of Expenses	France		France Sum of Profit	France Sum of Expenses	Greece				Greece Sum of Profit	Greece Sum of Expenses	Hungary		Hungary Sum of Profit	Hungary Sum of Expenses	Italy		Italy Sum of Profit	Italy Sum of Expenses	Romania				Romania Sum of Profit	Romania Sum of Expenses	Spain		Spain Sum of Profit	Spain Sum of Expenses	UK		UK Sum of Profit	UK Sum of Expenses	Total Sum of Profit	Total Sum of Expenses
Sofia				Paris				Athens		Kavala				Szeged				Brescia				Arges		Bucharest				Madrid				Brandon
Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses	Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses	Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses			Sum of Profit	Sum of Expenses

empty
Advanced Services Ace	Microvan
	Minivan
	Pickup
	Truck
	Van
Advanced Services Ace Total
Continential World Corp	Microvan
	Minivan
	Pickup
	Truck
Grand Total

empty
59450.00	93446.40	59450.00	93446.40	127817.50	146225.76	127817.50	146225.76	133762.50	60615.54	53505.00	19451.88	187267.50	80067.42	44587.50	14173.20	44587.50	14173.20	29725.00	10527.60	29725.00	10527.60	59450.00	33814.80	65395.00	91087.92	124845.00	124902.72	62422.50	100462.32	62422.50	100462.32	53505.00	5658.12	53505.00	5658.12	689620.00	575463.54
105165.00	126152.64	105165.00	126152.64	124640.00	107790.72	124640.00	107790.72	120745.00	42642.36	70110.00	19451.88	190855.00	62094.24	105165.00	25511.76	105165.00	25511.76	85690.00	23160.72	85690.00	23160.72	54530.00	23670.36	62320.00	66245.76	116850.00	89916.12	62320.00	76542.72	62320.00	76542.72	89585.00	7229.82	89585.00	7229.82	880270.00	518398.74
54530.00	88774.08	54530.00	88774.08	111930.00	127224.00	111930.00	127224.00	109060.00	52820.28	66010.00	24855.18	175070.00	77675.46	45920.00	15118.08	45920.00	15118.08	63140.00	23160.72	63140.00	23160.72	40180.00	23670.36	86100.00	124210.80	126280.00	147881.16	57400.00	95678.40	57400.00	95678.40	48790.00	5343.78	48790.00	5343.78	683060.00	580855.68
261170.00	121480.32	261170.00	121480.32	381710.00	139057.32	381710.00	139057.32	542430.00	76959.36	231035.00	24855.18	773465.00	101814.54	160720.00	15118.08	160720.00	15118.08	140630.00	14738.64	140630.00	14738.64	251125.00	42268.50	160720.00	66245.76	411845.00	108514.26	220990.00	105246.24	220990.00	105246.24	251125.00	7858.50	251125.00	7858.50	2601655.00	613827.90
150675.00	98118.72	150675.00	98118.72	287000.00	126446.52	287000.00	126446.52	229600.00	43172.46	172200.00	25935.84	401800.00	69108.30	136325.00	17952.72	136325.00	17952.72	107625.00	15791.40	107625.00	15791.40	121975.00	28742.58	93275.00	53824.68	215250.00	82567.26	121975.00	81326.64	121975.00	81326.64	143500.00	6286.80	143500.00	6286.80	1564150.00	497598.36
630990.00	527972.16	630990.00	527972.16	1033097.50	646744.32	1033097.50	646744.32	1135597.50	276210.00	592860.00	114549.96	1728457.50	390759.96	492717.50	87873.84	492717.50	87873.84	426810.00	87379.08	426810.00	87379.08	527260.00	152166.60	467810.00	401614.92	995070.00	553781.52	525107.50	459256.32	525107.50	459256.32	586505.00	32377.02	586505.00	32377.02	6418755.00	2786144.22
65395.00	102791.04	65395.00	102791.04	154570.00	191743.68	154570.00	191743.68	101065.00	46615.32	62422.50	22693.86	163487.50	69309.18	65395.00	20787.36	65395.00	20787.36	32697.50	11580.36	32697.50	11580.36	44587.50	25361.10	47560.00	66245.76	92147.50	91606.86	65395.00	105246.24	65395.00	105246.24	32697.50	3457.74	32697.50	3457.74	671785.00	596522.46
109060.00	130824.96	109060.00	130824.96	148010.00	119709.60	148010.00	119709.60	171380.00	60085.44	70110.00	19451.88	241490.00	79537.32	93480.00	22677.12	93480.00	22677.12	89585.00	24213.48	89585.00	24213.48	70110.00	30433.32	50635.00	53824.68	120745.00	84258.00	116850.00	143517.60	116850.00	143517.60	62320.00	5029.44	62320.00	5029.44	981540.00	609767.52
43050.00	70084.80	43050.00	70084.80	134890.00	167991.48	134890.00	167991.48	132020.00	63868.68	74620.00	28097.16	206640.00	91965.84	54530.00	17952.72	54530.00	17952.72	57400.00	21055.20	57400.00	21055.20	51660.00	30433.32	54530.00	78666.84	106190.00	109100.16	66010.00	110030.16	66010.00	110030.16	68880.00	7544.16	68880.00	7544.16	737590.00	595724.52
241080.00	112135.68	241080.00	112135.68	351575.00	130333.92	351575.00	130333.92	301350.00	40410.36	120540.00	12967.92	421890.00	53378.28	150675.00	14173.20	150675.00	14173.20	170765.00	17896.92	170765.00	17896.92	180810.00	30433.32	150675.00	62105.40	331485.00	92538.72	130585.00	62190.96	130585.00	62190.96	210945.00	6601.14	210945.00	6601.14	2009000.00	489248.82
7076087.50	6069343.68	7076087.50	6069343.68	13506732.50	8572818.12	13506732.50	8572818.12	13299682.50	3423000.78	6820965.00	1363792.92	20120647.50	4786793.70	6654812.50	1182044.88	6654812.50	1182044.88	6488045.00	1274892.36	6488045.00	1274892.36	6882260.00	2133713.88	6511107.50	4989133.80	13393367.50	7122847.68	6564920.00	5869869.84	6564920.00	5869869.84	6957290.00	397640.10	6957290.00	397640.10	80761902.50	35276250.36

1 2 3 4 5 6 7 8

Page size:

Render Mode

Render mode

Lightweight
Classic

Classic vs. Light rendering

	Classic	Lightweight
Markup Size
CSS Size	31.30 KB	26.04 KB
Image Sprite Size	9.66 KB	0 KB*

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

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).

<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="PivotGrid.Examples.RenderModes.DefaultVB" %>

<%@ 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 id="Div1" 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

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Render Modes

Related Resources

Support & Learning Resources

Find Assistance