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
607040170385137180350
241308123525130139294529
5836801743010242216
 3090120205595170290
 435093 187997190
2455241031524 39142
7578134287 12050170457
525 30 10 1040
217920120 15621141
2285491566167124297453
 30 30 8735122152
10030431731003935174347
389691611169123468070216163307
 6649115  44119
 50 5035 2661111
    124708686
525 30 60 6090
6 3642  1143
1910475625479213153946393152933018543
BeveragesChai
Chang
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
Beverages Total
CondimentsAniseed Syrup
Chef Anton's Cajun Seasoning
Chef Anton's Gumbo Mix
Genen Shouyu
Grandma's Boysenberry Spread
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