Back to Devexpress

How to: Group Fields

aspnet-7242-components-pivot-grid-examples-layout-how-to-group-fields.md

latest8.5 KB
Original Source

How to: Group Fields

  • Dec 17, 2020
  • 3 minutes to read

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.

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>
vb
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