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

WebForms PivotGrid Overview

empty
Drop Filter Fields Here
TotalPriceQuantityYearQuarter
CategoryProductName
empty
19971997 Sum of TotalPrice1997 Sum of Quantity 19981998 Sum of TotalPrice1998 Sum of QuantityTotal Sum of TotalPriceTotal Sum of Quantity
Quarter 1Quarter 2Quarter 3Quarter 4Quarter 1Quarter 2
Sum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of Quantity
empty
BeveragesChartreuse verte
Côte de Blaye
Guaraná Fantástica
Ipoh Coffee
Lakkalikööri
Laughing Lumberjack Lager
Outback Lager
Rhönbräu Klosterbier
Sasquatch Ale
Steeleye Stout
Grand Total
empty
$662.4046$450.0025$1,152.0064$2,664.00148$4,928.40283$3,996.00222$360.0020$4,356.00242$9,284.40525
$27,193.20129$16,864.0064$3,952.5015$3,952.5015$51,962.20223$61,922.50235$6,587.5025$68,510.00260$120,472.20483
$550.80153$675.00150$351.0078$180.0040$1,756.80421$1,737.00386$720.00160$2,457.00546$4,213.80967
$1,398.4038$4,600.00100$4,140.0090$1,380.0030$11,518.40258$4,140.0090$4,416.0096$8,556.00186$20,074.40444
$1,353.6094$3,744.00208$2,610.00145  $7,707.60447$4,320.00240$2,664.00148$6,984.00388$14,691.60835
  $518.0037$350.0025$42.003$910.0065$1,316.0094$280.0020$1,596.00114$2,506.00179
$1,260.00105$630.0042$3,465.00231$525.0035$5,880.00413$2,685.00179$1,035.0069$3,720.00248$9,600.00661
$458.8074$2,418.00312$984.25127$906.75117$4,767.80630$2,875.25371$232.5030$3,107.75401$7,875.551031
$616.0055$700.0050$784.0056$140.0010$2,240.00171$420.0030$3,010.00215$3,430.00245$5,670.00416
$1,483.20103$2,394.00133$1,710.0095$270.0015$5,857.20346$2,628.00146$2,106.00117$4,734.00263$10,591.20609
$135,283.405594$182,402.826670$189,623.977447$68,321.012267$575,631.2021978$266,773.928290$132,342.474469$399,116.3912759$974,747.5934737
12345678
Page size:
  • Demo Configurator

This demo demonstrates RadPivotGrid paging, scrolling and sorting functionalities as well as drag and drop feature.

Pivot Grid Fields represent data source fields and supply specific data to RadPivotGrid. Fields are visually represented by field headers that can be moved between control areas using drag-and-drop. Dragging fields between the areas modifies the layout of the report

About Telerik Pivot Grid for ASP.NET AJAX

RadPivotGrid, Telerik advanced ASP.NET Pivot Table control, is a data summarization control where users can break down raw data in any manner they want. A pivot table in ASP.NET AJAX can help quickly summarize the reports and highlight the desired information. It displays data in format such as spreadsheets or business intelligence applications. The RadPivotGrid control provides paging, scrolling and sorting functionalities as well as drag and drop feature.

RadPivotGrid and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Various field types
  • Codeless data-binding using the DataSourceControls.
  • Data-Binding to various data sources which implement the IEnumerable, IList, IQueryable or ICustomTypeDescriptor interfaces.
  • Integrated paging, sorting and scrolling functionalities.
  • Interoperability with RadAjax and loading indicators.
  • Easily customizable skinning mechanism (setting single Skin property of the pivotgrid).
  • The expanded state of the items is persisted while navigating through pages.
More about PivotGrid for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.FirstLook.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
</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 no-bg">
 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadPivotGrid RenderMode="Lightweight" AllowPaging="true" PageSize="10" Height="500px"
                ID="RadPivotGrid1" runat="server" ColumnHeaderZoneText="ColumnHeaderZone">
                <ClientSettings EnableFieldsDragDrop="true">
                    <Scrolling AllowVerticalScroll="true"></Scrolling>
                </ClientSettings>
                <Fields>
                    <telerik:PivotGridRowField DataField="Category" ZoneIndex="0">
                    </telerik:PivotGridRowField>
                    <telerik:PivotGridRowField DataField="ProductName" ZoneIndex="1">
                    </telerik:PivotGridRowField>
                    <telerik:PivotGridColumnField DataField="Year">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridColumnField DataField="Quarter" DataFormatString="Quarter {0}">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridAggregateField DataField="TotalPrice" Aggregate="Sum" DataFormatString="{0:C}">
                    </telerik:PivotGridAggregateField>
                    <telerik:PivotGridAggregateField DataField="Quantity" Aggregate="Sum">
                    </telerik:PivotGridAggregateField>
                </Fields>
                <SortExpressions>
                    <telerik:PivotGridSortExpression FieldName="TotalPrice" SortOrder="Descending"></telerik:PivotGridSortExpression>
                </SortExpressions>
            </telerik:RadPivotGrid>
           </div>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <label class="checkBoxesLabel">Use check boxes bellow to customize the RadPivotGrid control</label>
                    <ul class="checkbox-list">
                    <li><span class="checkbox">
                        <asp:CheckBox ID="chkBox1" runat="server" Text="AllowSorting" AutoPostBack="true" CssClass="cellType"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="chkBox2" runat="server" Text="ShowColumnHeaderZone" Checked="true"
                            AutoPostBack="true" CssClass="cellType"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="chkBox3" runat="server" Text="ShowRowHeaderZone" Checked="true"
                            AutoPostBack="true"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="chkBox4" runat="server" Text="ShowDataHeaderZone" Checked="true"
                            AutoPostBack="true" CssClass="cellType"></asp:CheckBox></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="chkBox5" runat="server" Text="EnableZoneContextMenu" Checked="false"
                            AutoPostBack="true" CssClass="cellType"></asp:CheckBox></span>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance