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

Drag Drop Fields

empty
Drop Filter Fields Here
QuantityYearQuarter
CategoryTotalPriceRow fields
19971997 Total 19981998 TotalGrand Total
Quarter 1Quarter 2Quarter 3Quarter 4Quarter 1Quarter 2
  3.00 3.00   3.00
  2.00 2.00   2.00
 5.005.00 5.00   5.00
4.00   4.00   4.00
     6.00 6.006.00
 8.00 2.005.008.002.005.005.00
   3.003.00   3.00
 10.00  10.007.677.677.678.00
     6.00 6.006.00
 3.003.00 3.007.5012.009.757.50
26.8923.5723.4923.3724.2923.0325.9823.9824.17
Beverages13.50
15.50
22.50
24.80
27.00
36.00
42.00
45.00
46.50
54.00
Grand Total
12345678910...
Page size:
  • Refresh
  • Hide
  • Summarize By Settings
  • Show Fields Window
  • Demo Configurator

The Drag/Drop functionality could be used to:

  • Show/hide fields from the results
  • Change the order in which the fields are displayed
  • Substitute columns/aggregates

This feature provides ease of access for changing the RadPivotGrid structure and the layout.

Additionally, the Fields Popup functionlity could be used to group zone fields in order to increase data viewing area.

In order to use the Drag/Drop functionality of RadPivotGrid you need to use the header context menu of the field. To show the header context menu, right click on any field and choose the appropriate option:

  • Refresh
  • Hide
  • Show Fields Window

To show an already hidden field, you should open the Fields Window and drag the desired item to its new location.

At the top of the page is a fieldset containing NumericTextBox controls determining the values for RadPivotGrid.FieldsPopupSettings properties which are responsible for

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.PivotGrid.Examples.DragDropFields.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>
</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="PanelFieldsPopup">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="PanelFieldsPopup" />
                        <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
 <div class="demo-container no-bg">
       <telerik:RadPivotGrid RenderMode="Lightweight" runat="server" ID="RadPivotGrid1" OnNeedDataSource="RadPivotGrid1_NeedDataSource"
            Width="100%" EnableZoneContextMenu="true" AllowSorting="true" AllowPaging="true">
            <FieldsPopupSettings RowFieldsMinCount="2" />
            <Fields>
                <telerik:PivotGridColumnField DataField="Year" Caption="Year" UniqueName="Year">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridColumnField DataField="Quarter" Caption="Quarter" UniqueName="Quarter"
                    DataFormatString="Quarter {0}">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridAggregateField DataField="Quantity" Caption="Quantity" UniqueName="Quantity"
                    Aggregate="Average" DataFormatString="{0:F2}">
                </telerik:PivotGridAggregateField>
                <telerik:PivotGridRowField DataField="Category" Caption="Category" UniqueName="Category"
                    DataFormatString="{0:F2}">
                </telerik:PivotGridRowField>
                <telerik:PivotGridRowField DataField="TotalPrice" Caption="TotalPrice" UniqueName="TotalPrice"
                    DataFormatString="{0:F2}">
                </telerik:PivotGridRowField>
            </Fields>
            <ClientSettings EnableFieldsDragDrop="true">
                <ClientMessages DragToReorder="Drag the field to change its order"></ClientMessages>
            </ClientSettings>
        </telerik:RadPivotGrid>
     </div>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <asp:Panel ID="PanelFieldsPopup" runat="server">
                    <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                        <ul class="fb-group">
                            <li>
                                <qsf:NumericTextBox ID="RadNumbericTextBoxFilterPopup" runat="server" MinValue="0"
                                    Value="0" ShowSpinButtons="true" Label="Filter fields (min count)" LabelWidth="210px"
                                     Size="Medium" AutoPostBack="true" OnTextChanged="RadNumbericTextBoxPopup_TextChanged">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox ID="RadNumericTextBoxAggregatePopup" runat="server" MinValue="0"
                                    Value="0" ShowSpinButtons="true" Label="Aggregate fields (min count)" LabelWidth="210px"
                                     Size="Medium" AutoPostBack="true" OnTextChanged="RadNumbericTextBoxPopup_TextChanged">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                        <ul class="fb-group">
                            <li>
                                <qsf:NumericTextBox ID="RadNumericTextBoxColumnPopup" runat="server" MinValue="0"
                                    Value="0" ShowSpinButtons="true" Label="Column fields (min count)" LabelWidth="210px"
                                     Size="Medium" AutoPostBack="true" OnTextChanged="RadNumbericTextBoxPopup_TextChanged">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox ID="RadNumericTextBoxRowPopup" runat="server" MinValue="0"
                                    Value="2" ShowSpinButtons="true" Label="Row fields (min count)" LabelWidth="210px"
                                    Size="Medium" AutoPostBack="true" OnTextChanged="RadNumbericTextBoxPopup_TextChanged">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </asp:Panel>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance