Field Groups

Dec 17, 2020
5 minutes to read

ASPxPivotGrid control provides the capability to arrange its fields into groups. These fields cannot be separated by end-users by dragging one of them to a different area or hiding it on the Customization Form.

Tip

Demo: Field Groups

Create Groups at Design Time

The Fields and Groups page of the ASPxPivotGrid Designer provides design-time capabilities to create groups.

You can create a new group at design time in different ways.

Select fields you want to combine into a group. Hold down the SHIFT or CTRL key while clicking field names to select multiple fields. Then click the Move to a new group button. This creates a new group and moves the selected fields into it.
Right-click the selected fields and choose the Move to a new group item in the invoked context menu.

Remove Groups

To remove the selected fields from the group and move them to the parent area, click the Move Out button.

You can also move the selected fields from the group using the context menu.

Create Groups in Code

The ASPxPivotGrid.Groups collection property provides the capability to manage field groups. To create a new group and populate it with fields, follow the steps below.

Create a new group, which is represented by a PivotGridWebGroup object.
Add fields to the created group. To do this, you can use one of the PivotGridGroupCollection.Add overloads. Use the PivotGridField.ID property to specify data fields which will be added to the group.
Add the created group to the ASPxPivotGrid.Groups collection.

The first field in the group determines the area where this group is located and a position of a group within the current area. To move the group to a different area or to a new position within the current area, use the PivotGridFieldBase.Area and PivotGridFieldBase.AreaIndex properties of the first field in the group. Setting these properties for the second and/or subsequent fields in the group has no effect. Use the PivotGridFieldBase.GroupIndex property to determine the index of the field group which owns the current field. The fields’ inner group index, which determines the place of the field in a field group, will be assigned automatically. To manually change field order in the group, use the PivotGridFieldBase.InnerGroupIndex property.

Grouped fields can be collapsed and expanded by clicking the expand buttons. Collapsing/expanding a grouped field header collapses/expands columns or rows that correspond to grouped child fields. To control the expansion status of the current field in a group, use its PivotGridFieldBase.ExpandedInFieldsGroup property. Use the control PivotGridOptionsCustomization.AllowExpand property to prevent end-users from expanding or collapsing any columns/rows. To prevent end-users from expanding or collapsing columns/rows that correspond to a specific column or row field, use the field PivotGridFieldOptions.AllowExpand property.

Follow the steps below to create a new group at design time:

Invoke the ASPxPivotGrid Designer.
In the Fields and Groups page expand the ColumnArea and select the Year, Quarter and Month fields. Hold down SHIFT or CTRL while you click field names to select multiple fields.
Then click the Move to a new group button, that creates a new Year-Quarter-Month group and moves the selected fields into it.

The image below show the result.

The following code demonstrates how to combine fields into a group at runtime.

In this example, three fields (Year, Quarter and Month, respectively) are combined into a new group. This ensures that the Year field will be followed by Quarter which in its turn is followed by Month. If the Year field is being dragged to another area other fields will be dragged as well.

WebForm1.aspx.cs
WebForm1.aspx (C#)
WebForm1.aspx (VB.NET)
WebForm1.aspx.vb

csharp

using System;
using DevExpress.Web.ASPxPivotGrid;

namespace ASPxPivotGridFieldGroups
{
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Creates a PivotGridWebGroup instance.
            PivotGridWebGroup groupOrderDate = new PivotGridWebGroup();

            // Adds fields to the created group.
            groupOrderDate.Fields.Add(fieldOrderYear);
            groupOrderDate.Fields.Add(fieldOrderQuarter);
            groupOrderDate.Fields.Add(fieldOrderMonth);

            // Adds the created group to the collection of the ASPxPivotGrid groups.
            ASPxPivotGrid1.Groups.Add(groupOrderDate);
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
Inherits="ASPxPivotGridFieldGroups.WebForm1" %>

<%@ Register Assembly="DevExpress.Web.ASPxPivotGrid.v15.2, Version=15.2.5.0, 
Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxPivotGrid" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server" ClientIDMode="AutoID" 
            DataSourceID="AccessDataSource1" Theme="Metropolis">
            <Fields>
                <dx:PivotGridField ID="fieldCountry" AreaIndex="0" FieldName="Country" 
                    Visible="False">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldSalesPerson" AreaIndex="0" Caption="Sales Person" 
                    FieldName="Sales_Person" Visible="False">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldExtendedPrice" Area="DataArea" AreaIndex="0" 
                    Caption="Extended Price" FieldName="Extended_Price">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderYear" Area="ColumnArea" AreaIndex="0" 
                    Caption="Year" FieldName="OrderDate" GroupInterval="DateYear">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldCategoryName" Area="RowArea" AreaIndex="0" 
                    Caption="Category" FieldName="CategoryName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldProductName" Area="RowArea" AreaIndex="1" 
                    Caption="Product" FieldName="ProductName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderQuarter" Area="ColumnArea" AreaIndex="1" 
                    Caption="Quarter" ExpandedInFieldsGroup="False" FieldName="OrderDate" 
                    GroupInterval="DateQuarter" ValueFormat-FormatString="Quarter {0}" 
                    ValueFormat-FormatType="Custom">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderMonth" Area="ColumnArea" AreaIndex="2" 
                    Caption="Month" FieldName="OrderDate" GroupInterval="DateMonth">
                </dx:PivotGridField>
            </Fields>
        </dx:ASPxPivotGrid>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/nwind.mdb" 
            SelectCommand="SELECT [Country], [Sales Person] AS Sales_Person, 
            [Extended Price] AS Extended_Price, [OrderDate], [CategoryName], 
            [ProductName] FROM [SalesPerson]">
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>

aspx

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
Inherits="ASPxPivotGridFieldGroups.WebForm1" %>

<%@ Register Assembly="DevExpress.Web.ASPxPivotGrid.v15.2, Version=15.2.5.0, 
Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxPivotGrid" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server" ClientIDMode="AutoID" 
            DataSourceID="AccessDataSource1" Theme="Metropolis">
            <Fields>
                <dx:PivotGridField ID="fieldCountry" AreaIndex="0" FieldName="Country" 
                    Visible="False">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldSalesPerson" AreaIndex="0" Caption="Sales Person" 
                    FieldName="Sales_Person" Visible="False">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldExtendedPrice" Area="DataArea" AreaIndex="0" 
                    Caption="Extended Price" FieldName="Extended_Price">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderYear" Area="ColumnArea" AreaIndex="0" 
                    Caption="Year" FieldName="OrderDate" GroupInterval="DateYear">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldCategoryName" Area="RowArea" AreaIndex="0" 
                    Caption="Category" FieldName="CategoryName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldProductName" Area="RowArea" AreaIndex="1" 
                    Caption="Product" FieldName="ProductName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderQuarter" Area="ColumnArea" AreaIndex="1" 
                    Caption="Quarter" ExpandedInFieldsGroup="False" FieldName="OrderDate" 
                    GroupInterval="DateQuarter" ValueFormat-FormatString="Quarter {0}" 
                    ValueFormat-FormatType="Custom">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldOrderMonth" Area="ColumnArea" AreaIndex="2" 
                    Caption="Month" FieldName="OrderDate" GroupInterval="DateMonth">
                </dx:PivotGridField>
            </Fields>
        </dx:ASPxPivotGrid>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/nwind.mdb" 
            SelectCommand="SELECT [Country], [Sales Person] AS Sales_Person, 
            [Extended Price] AS Extended_Price, [OrderDate], [CategoryName], 
            [ProductName] FROM [SalesPerson]">
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>

Imports System
Imports DevExpress.Web.ASPxPivotGrid

Namespace ASPxPivotGridFieldGroups
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Creates a PivotGridWebGroup instance.
            Dim groupOrderDate As New PivotGridWebGroup()

            ' Adds fields to the created group.
            groupOrderDate.Fields.Add(fieldOrderYear)
            groupOrderDate.Fields.Add(fieldOrderQuarter)
            groupOrderDate.Fields.Add(fieldOrderMonth)

            ' Adds the created group to the collection of the ASPxPivotGrid groups.
            ASPxPivotGrid1.Groups.Add(groupOrderDate)
        End Sub
    End Class
End Namespace