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
7578134287 12050170457
525 30 10 1040
 792099 15621120
2285491566167120293449
 30 30 8735122152
10030431731003935174347
284491490126517154542011362401
 50 5035 2560110
     4707474
525 30 60 6090
6 3642    42
2190 111 14012152263
 138 138 202747185
70243012470  70194
1675449023778542127345042828860517147
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
CondimentsChef Anton's Cajun Seasoning
Chef Anton's Gumbo Mix
Genen Shouyu
Grandma's Boysenberry Spread
Gula Malacca
Louisiana Fiery Hot Pepper Sauce
Northwoods Cranberry Sauce
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