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

Field List

All Fields
ShipCountryYearCategoryNameProductNameQuantityProductID
Filter Fields
Column Fields
Aggregate Fields
Quantity
empty
GermanyGermany Total USAUSA TotalGrand Total
199619971998199619971998
5836801743010 40214
 3090120 5595150270
 435093 187997190
 552479 24 24103
2778134239 12050170409
 25 25 10 1035
 792099 15621120
128549146 167120287433
 30 30 8735122152
 3043731003935174247
97491490107813054542010952173
525 30 60 6090
 90 90 14012152242
 138 138 202747185
 16038198 503080278
 31435 1356141176
 26 26802410114140
54704251780429855941111
85839652023684683040882257717514021
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
Beverages Total
CondimentsGenen Shouyu
Gula Malacca
Louisiana Fiery Hot Pepper Sauce
Original Frankfurter grüne Soße
Sirop d'érable
Vegie-spread
Condiments Total
Grand Total
Page size:
  • Stacked
  • Side-By-Side
  • Two-By-Two
  • One-By-Four
  • Move Up
  • Move Down
  • Move to Beginning
  • Move to End
  • Move to Filter Fields
  • Move to Row Fields
  • Move to Column Fields
  • Move to Aggregate Fields
  • Hide Field
  • Summarize By Settings
  • Demo Configurator
Configurator panel

This example shows RadPivotGrid ConfigurationPanel which idea is taken from the Excel PivotTable Field List which enables fields sorting, reordering and hiding operations performed outside of the table which represents the data. Enabling such functionality gives the user ability to separate the logic for manipulating fields and displaying data.

RadPivotGrid ConfigurationPanelSettings property represents options for configuring the panel. The behavior of each property is described below.

  • Position - determines the panel position relative to the RadPivotGrid control.
  • LayoutType - the panel layout could be altered on the client and its default type could be altered by setting on of the four available values
  • EnableDragDrop - a Boolean property determining if fields could be dragged or not
  • EnableFieldsContextMenu - a Boolean property determining if the context menu of the field will be enabled
  • DefaultDeferedLayoutUpdate - determines if the Defer Layout Update will be enabled which will enable the RadPivotGrid to make rearrangements and sorting operations without a need for a postback. Updating all the pivot data is one click away.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true"
    CodeFile="DefaultCS.aspx.cs" Inherits="PivotGrid_Examples_ConfigurationPanel_DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadPivotGrid RenderMode="Lightweight" ID="RadPivotGrid1" runat="server" DataSourceID="SqlDataSource1" AllowFiltering="true"
            AllowPaging="true" PageSize="18" ShowFilterHeaderZone="false" ShowDataHeaderZone="false" ShowRowHeaderZone="false"
            ShowColumnHeaderZone="false" EnableConfigurationPanel="true" AllowSorting="true">
            <Fields>
                <telerik:PivotGridColumnField DataField="ShipCountry">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridColumnField DataField="Year">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridRowField DataField="CategoryName">
                </telerik:PivotGridRowField>
                <telerik:PivotGridRowField DataField="ProductName">
                </telerik:PivotGridRowField>
                <telerik:PivotGridAggregateField DataField="Quantity" Aggregate="Sum">
                </telerik:PivotGridAggregateField>
            </Fields>
            <ConfigurationPanelSettings Position="Left" DefaultDeferedLayoutUpdate="true" />
        </telerik:RadPivotGrid>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ProductID], [ProductName], [ShipCountry], [CategoryName], [Year], [Quantity] FROM [Product Reports Comparison]"
            runat="server"></asp:SqlDataSource>
    </div>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <fieldset>
                    <legend>
                        Configurator panel
                    </legend>
                </fieldset> 
                <ul class="fb-group">
                    <li>
                        <qsf:ComboBox AutoPostBack="true" runat="server" ID="RadComboBoxPosition"
                            OnSelectedIndexChanged="RadComboBoxPosition_SelectedIndexChanged"
                            Label="Position" Size="Narrow">
                            <Items>
                                <telerik:RadComboBoxItem Text="FieldsWindow" Value="FieldsWindow" />
                                <telerik:RadComboBoxItem Text="Left" Value="Left" Selected="true" />
                                <telerik:RadComboBoxItem Text="Top" Value="Top" />
                                <telerik:RadComboBoxItem Text="Right" Value="Right" />
                                <telerik:RadComboBoxItem Text="Bottom" Value="Bottom" />
                            </Items>
                        </qsf:ComboBox>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBoxEnableDragDrop" runat="server" AutoPostBack="true"
                            Checked="true" Text="Drag-Drop"
                            OnCheckedChanged="CheckBoxEnableDragDrop_CheckedChanged" /></span>
                    </li>
                    <li><span class="checkbox">
                        <asp:CheckBox ID="CheckBoxEnableFieldsContextMenu" runat="server"
                            AutoPostBack="true" Checked="true" Text="Fields Context Menu"
                            OnCheckedChanged="CheckBoxEnableFieldsContextMenu_CheckedChanged" /></span>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance