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
 3090120205595170290
 435093 187997190
2455241031524 39142
2778134239 12050170409
525 30 10 1040
 792099 15621120
2285491566167120293449
 30 30 8735122152
 3043731003935174247
136491490111717154542011362253
525 30 60 6090
2190 111 14012152263
 138 138 202747185
 16038198 503080278
 31435 1356141176
 26 26802410114140
264704253880429855941132
1064427522227561115843552673818615747
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Title="" Language="VB"  AutoEventWireup="false"
    CodeFile="DefaultVB.aspx.vb" Inherits="PivotGrid_Examples_ConfigurationPanel_DefaultVB" %>

<%@ 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" />
    <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>
    <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>
                        <asp:CheckBox ID="CheckBoxEnableDragDrop" runat="server" AutoPostBack="true"
                            Checked="true" Text="Drag-Drop"
                            OnCheckedChanged="CheckBoxEnableDragDrop_CheckedChanged" />
                    </li>
                    <li>
                        <asp:CheckBox ID="CheckBoxEnableFieldsContextMenu" runat="server"
                            AutoPostBack="true" Checked="true" Text="Fields Context Menu"
                            OnCheckedChanged="CheckBoxEnableFieldsContextMenu_CheckedChanged" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance