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

Client-Side API

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
BeveragesChai
Chang
Chartreuse verte
Côte de Blaye
Guaraná Fantástica
Ipoh Coffee
Lakkalikööri
Laughing Lumberjack Lager
Outback Lager
Rhönbräu Klosterbier
Grand Total
empty
$705.6049$1,566.0087$3,024.00168EmptyEmpty$5,295.60304$4,590.00255$2,592.00144$7,182.00399$12,477.60703
$2,660.00175$418.0022$2,907.00153$1,615.0085$7,600.00435$2,527.00133$4,997.00263$7,524.00396$15,124.00831
$662.4046$450.0025$1,152.0064$2,664.00148$4,928.40283$3,996.00222$396.0022$4,392.00244$9,320.40527
$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.00145EmptyEmpty$7,707.60447$4,320.00240$2,664.00148$6,984.00388$14,691.60835
EmptyEmpty$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$263.5034$3,138.75405$7,906.551035
$147,879.906303$207,076.027765$225,956.578739$77,476.262682$658,388.7525489$315,242.1210646$154,529.225601$469,771.3416247$1,128,160.0941736
123456789
Page size:
  • Refresh
  • Hide
  • Summarize By Settings
  • Show Fields Window
Event log

  • Expand
  • Collapse
  • Demo Configurator
  • Paging
  • Sorting

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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Scripts.js
  • 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 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