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

Client-Side API

Drop Filter Fields Here

TotalPriceQuantity

empty
1997								1997 Sum of TotalPrice	1997 Sum of Quantity	1998				1998 Sum of TotalPrice	1998 Sum of Quantity	Total Sum of TotalPrice	Total Sum of Quantity
Quarter 1		Quarter 2		Quarter 3		Quarter 4				Quarter 1		Quarter 2
Sum of TotalPrice	Sum of Quantity	Sum of TotalPrice	Sum of Quantity	Sum of TotalPrice	Sum of Quantity	Sum of TotalPrice	Sum of Quantity			Sum of TotalPrice	Sum of Quantity	Sum of TotalPrice	Sum of Quantity

empty
Beverages	Chartreuse 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.40	46	$450.00	25	$1,152.00	64	$2,664.00	148	$4,928.40	283	$3,996.00	222	$360.00	20	$4,356.00	242	$9,284.40	525
$27,193.20	129	$16,864.00	64	$3,952.50	15	$3,952.50	15	$51,962.20	223	$61,922.50	235	$6,587.50	25	$68,510.00	260	$120,472.20	483
$550.80	153	$675.00	150	$351.00	78	$180.00	40	$1,756.80	421	$1,737.00	386	$720.00	160	$2,457.00	546	$4,213.80	967
$1,398.40	38	$4,600.00	100	$4,140.00	90	$1,380.00	30	$11,518.40	258	$4,140.00	90	$4,416.00	96	$8,556.00	186	$20,074.40	444
$1,353.60	94	$3,744.00	208	$2,610.00	145	Empty	Empty	$7,707.60	447	$4,320.00	240	$2,664.00	148	$6,984.00	388	$14,691.60	835
Empty	Empty	$518.00	37	$350.00	25	$42.00	3	$910.00	65	$1,316.00	94	$280.00	20	$1,596.00	114	$2,506.00	179
$1,260.00	105	$630.00	42	$3,465.00	231	$525.00	35	$5,880.00	413	$2,685.00	179	$1,035.00	69	$3,720.00	248	$9,600.00	661
$458.80	74	$2,418.00	312	$984.25	127	$906.75	117	$4,767.80	630	$2,875.25	371	$232.50	30	$3,107.75	401	$7,875.55	1031
$616.00	55	$700.00	50	$784.00	56	$140.00	10	$2,240.00	171	$420.00	30	$3,010.00	215	$3,430.00	245	$5,670.00	416
$1,483.20	103	$2,394.00	133	$1,710.00	95	$270.00	15	$5,857.20	346	$2,628.00	146	$2,106.00	117	$4,734.00	263	$10,591.20	609
$131,945.00	5487	$173,323.32	6381	$184,753.97	7292	$64,109.01	2159	$554,131.30	21319	$261,781.92	8162	$128,871.47	4380	$390,653.39	12542	$944,784.69	33861

1 2 3 4 5 6 7

Page size:

Event log

Demo Configurator

Paging
Sorting

Current page:Spin Up Spin Down

PageSize:Spin Up Spin Down

Select field to sort
Year
Quarter
Category
ProductName

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

The demo showcases various techniques involving the RadPivotGrid Client-Side API. It is very easy to access cells, zones, subscribe to events, perform paging, sorting and expand\collapse operations.

The functionalities implemented using the API are listed below:

The paging section shows how you could externally page the pivot using custom design and using different controls.
The sorting section shows how simple is to sort the pivot data.
If you take a look at the event log below the PivotGrid you could observe of each of the control interactions events are fired which could be handled and custom logic implemented. For example if you click one of the cells it will highlight and show which value you are currently looking at.
Another little addition just to showcase the possibilities the API provides - is right clicking a cell which contains a expand\collapse button a context menu shows which gives you the option to expand and collapse using the menu.

<%@ 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 rel="Stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</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:RadAjaxPanel ID="radAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadPivotGrid RenderMode="Lightweight" ID="RadPivotGrid1" runat="server" AllowPaging="true" PageSize="10"
            Height="500px" ColumnHeaderZoneText="ColumnHeaderZone" EnableZoneContextMenu="true"
            AllowSorting="true" EmptyValue="Empty" ErrorValue="Error" OnNeedDataSource="RadPivotGrid1_NeedDataSource">
            <PagerStyle AlwaysVisible="false" />
            <ClientSettings>
                <Scrolling AllowVerticalScroll="true"></Scrolling>
                <ClientEvents OnPivotGridCreated="demo.PivotGridCreated" OnCellClick="demo.CellClick" OnCellMouseOver="demo.CellMouseOver"
                    OnCellMouseOut="demo.CellMouseOut" OnCellContextMenu="demo.CellContextMenu" OnCellDoubleClick="demo.CellDoubleClick"
                    OnMenuShown="demo.MenuShown" OnMenuShowing="demo.MenuShowing" />
            </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>
        <qsf:EventLogConsole runat="server" ID="EventLogConsole1" CssClass="eventLog" Height="400px"
            Width="100%"></qsf:EventLogConsole>
        <br class="qsf-clear-float" />
        <telerik:RadContextMenu runat="server" ID="RadContextMenuExpandCollapse" OnClientItemClicked="demo.ItemClicked">
            <Items>
                <telerik:RadMenuItem Text="Expand" Value="Expand">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Collapse" Value="Collapse">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
    </telerik:RadAjaxPanel>
    </div>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View Title="Paging">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <qsf:Button runat="server" Text="First" ID="ButtonFirstPage" AutoPostBack="false" OnClientClick="demo.GoToFirstPage" />
                    <qsf:Button runat="server" ID="ButtonPreviousPage" Text="Prev" AutoPostBack="false" OnClientClick="demo.GoToPreviousPage" />
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="RadNumericTextBoxCurrentPage" Size="Medium"
                                runat="server" Value="1" Label="Current page:" ShowSpinButtons="true"
                                MinValue="1">
                                <NumberFormat DecimalDigits="0" />
                                <ClientEvents OnValueChanged="demo.CurrentPageValueChanged" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="RadNumericTextBoxPageSize"
                                runat="server" Value="10" MinValue="1" Size="Medium"
                                ShowSpinButtons="true" Label="PageSize:">
                                <NumberFormat DecimalDigits="0" />
                                <ClientEvents OnValueChanged="demo.PageSizeValueChanged" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <qsf:Button runat="server" Text="Next" ID="ButtonNextPage" AutoPostBack="false" OnClientClicked="demo.GoToNextPage" />
                    <qsf:Button runat="server" Text="Last" ID="ButtonLastPage" AutoPostBack="false" OnClientClicked="demo.GoToLastPage" />
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Sorting">
                <ul class="fb-group">
                    <li>
                        <qsf:ComboBox runat="server" ID="RadComboBox1" OnClientLoad="demo.OnLoad" Size="Medium" Label="Select field to sort">
                        </qsf:ComboBox>
                        <qsf:Button ID="Button1" runat="server" Text="Sort" AutoPostBack="false" OnClientClicked="demo.Sort" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </telerik: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

Client-Side API

Related Resources

Support & Learning Resources

Find Assistance