Skip to main content
BuyLog In
ASP.NET Web Forms Controls
Search in…
Docs > Components > Grid View > Group Data
All docs
V24.1
ASP.NET Web Forms Controls
Prerequisites
Supported Browsers
What's Installed
Get Started
Upgrade to a New Version
Common Concepts
Components
Card View
Chart Control
Data and Image Navigation
Data Editors
Diagram
Docking and Popups
File Management
Gantt
Gauges
Grid View
Get Started
Bind to Data
Data Representation Basics
Focus and Navigation
Edit Data
Data Summaries
Filter Data
Group Data
Sort Data
Merge Data Cells
Save and Restore Client Layout
Format Data
Master-Detail Relationship
Appearance Customization
Adaptivity
GridView Table Layout
Templates
Export
Toolbars
ASPxGridLookup
Grid Designer
Set Up Text Wrapping
Visual Elements
Examples
Member Tables
Deployment
HTML Editor
Multi-Use Site Controls
Pivot Grid
Reporting
Rich Text Editor
Scheduler
Site Navigation and Layout
Spell Checker
Spreadsheet
Tree List
Vertical Grid
Query Builder
Security Considerations
Redistribution and Deployment
Troubleshooting
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

Group Data

  • 8 minutes to read

ASPxGridView allows you to group its data by column values.

Run Demo: ASPxGridView - Grouping Data

Use the following properties to specify whether a user can group data:

ASPxGridView.SettingsBehavior.AllowGroup
Specifies grouping availability at the control level.
GridViewDataColumn.Settings.AllowGroup
Specifies grouping availability at the column level. If this property value is Default, the column’s behavior depends on the control-level setting.
<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" KeyFieldName="CustomerID" >
    <Columns>
        <dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="0">
            <Settings AllowGroup="True" />
        </dx:GridViewDataTextColumn>
        <%--...--%>
    </Columns>
    <Settings ShowGroupPanel="true" />
    <SettingsBehavior AllowGroup="false" />
</dx:ASPxGridView>

When the grid groups its data by a column, it automatically sorts that column’s values in ascending order. However, you can also reverse the sort order. For more information on sorting in the grid, refer to the following topic: ASPxGridView - Sort Data.

View Example: How to select/deselect all rows in a group when Grid View data is grouped by one column

Group in the UI

Users can drag a column header to the Group Panel to group data by that column. Set the ShowGroupPanel property to true to enable this functionality.

When the grid groups its data, it hides grouped columns. To display them, set the ShowGroupedColumns property to true.

ASPxGridView - Grouping

<dx:ASPxGridView ID="grid" runat="server">
    <%--...--%>
    <Settings ShowGroupPanel="true" ShowGroupedColumns="true"/>
</dx:ASPxGridView>

Group in Code

Group Data by a Column

Use one of the following API members to group data in the grid:

  • Use a column’s GroupIndex property to set the grouping level.

    <dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" >
  <Columns>
      <dx:GridViewDataTextColumn FieldName="Country" GroupIndex="0" />
      <dx:GridViewDataTextColumn FieldName="City"/>
      <%--...--%>
  </Columns>
  <Settings ShowGroupPanel="true" />
</dx:ASPxGridView>

    ((GridViewDataColumn)grid.Columns["City"]).GroupIndex = 1;

  • Call a column’s GroupBy() method.

    ((GridViewDataColumn)grid.Columns["Country"]).GroupBy();

  • Call the control’s server-side GroupBy method.

    ASPxGridView1.GroupBy((GridViewDataColumn)grid.Columns["Country"], 0);

  • Call the control’s client-side GroupBy(column) method.

    grid.GroupBy("Country", 0, "DSC");

Clear Grouping

Use one of the following API members to clear the grouping applied to a particular column:

  • Set a column’s GroupIndex property to -1.

    ((GridViewDataColumn)grid.Columns["Country"]).GroupIndex = -1;

  • Call a column’s UnGroup() method.

    ((GridViewDataColumn)grid.Columns["Country"]).UnGroup();

  • Call the control’s server-side UnGroup(GridViewColumn) method.

    grid.UnGroup((GridViewDataColumn)grid.Columns["Country"]);

  • Call the control’s client-side UnGroup(column) method.

    grid.UnGroup("Country");
API member Type Description
ColumnGrouping Event Fires before the grid groups its data by column values.
BeforeColumnSortingGrouping Event Fires before a column is sorted or grouped.
IsGroupRow(Int32) Method Indicates whether the specified row is a group row.
GetGroupedColumns() Method Returns a collection of grouped columns.
GroupCount Property Gets the number of grouped columns.
GroupFormat Property Specifies the text pattern for group rows.
ParentGroupRows Property Specifies the settings of an image that indicates to which group the data row belongs.
GroupPanel Property Specifies the appearance of the Group Panel.
GroupRow Property Specifies the appearance of group rows.

Expand and Collapse Group Rows

When a user clicks a group row to expand or collapse it, the grid raises the RowExpanding or RowCollapsing event. You can use the cancel argument property to prevent users from expanding or collapsing the specified group row.

To get information about the current expanded or collapsed state of a particular group row, call the IsRowExpanded(Int32) method.

Expand Group Rows

Use one of the following API members to expand group rows:

  • Set the AutoExpandAllGroups property to true to automatically expand all group rows on the first grid load and after each grouping operation.

    ASPxGridView1.SettingsBehavior.AutoExpandAllGroups = true;

  • Call the control’s server-side ExpandRow or ExpandAll() methods.

    // Expands the specified group row
ASPxGridView1.ExpandRow(0);

// Expands all group rows
ASPxGridView1.ExpandAll();

  • Call the control’s client-side ExpandRow(visibleIndex) or ExpandAll methods.

    // Expands the specified group row
grid.ExpandRow(0);

// Expands all group rows
grid.ExpandAll();

Collapse Group Rows

Use one of the following API members to collapse group rows:

  • Call the control’s server-side CollapseRow or CollapseAll() methods.

    // Collapses the specified group row
ASPxGridView1.CollapseRow(0);

// Collapses all group rows
ASPxGridView1.CollapseAll();

  • Call the control’s client-side CollapseRow(visibleIndex) or CollapseAll methods.

    // Collapses the specified group row
grid.CollapseRow(0);

// Collapses all group rows
grid.CollapseAll();

Interval Grouping

ASPxGridView allows you to specify how the control combines data rows when they are grouped by a particular column. You can use one of the predefined grouping algorithms specified by the GroupInterval property.

Run Demo: ASPxGridView - IntervalGrouping

The code sample below sets the GroupInterval property to DateYear to group data rows within the Order Date column by years.

ASPxGridView - IntervalGrouping

<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" KeyFieldName="OrderID" 
    AutoGenerateColumns="False">
    <Columns>
        <%--...--%>
        <dx:GridViewDataDateColumn FieldName="OrderDate" GroupIndex="0">
            <Settings GroupInterval="DateYear" />
        </dx:GridViewDataDateColumn>
    </Columns>
    <Settings ShowGroupPanel="True" />
</dx:ASPxGridView>

Custom Grouping

ASPxGridView allows you to apply a custom grouping algorithm to its data. Follow the steps below to enable this functionality:

  1. Set the SortMode property to Custom.
  2. Handle the CustomColumnGroup event to implement custom grouping logic.

To customize the text of group rows, handle the CustomGroupDisplayText event.

The sample below groups the values of the UnitPrice column in increments of $10: $0.00 to $9.99, $10.00 to $19.99, $20.00 to $29.99, and so on.

ASPxGridView - CustomGrouping

<dx:ASPxGridView ID="grid" runat="server" KeyFieldName="ProductID" AutoGenerateColumns="false"
    OnCustomColumnGroup="grid_CustomColumnGroup"
    OnCustomGroupDisplayText="grid_CustomGroupDisplayText">
    <GroupSummary>
        <dx:ASPxSummaryItem SummaryType="Count" />
    </GroupSummary>
    <Settings ShowGroupedColumns="True" ShowGroupPanel="True" />
    <Columns>
        <%--...--%>
        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="2" GroupIndex="0" SortIndex="0"
            SortOrder="Ascending">
            <%--...--%>
        </dx:GridViewDataTextColumn>
</dx:ASPxGridView>

protected void grid_CustomColumnGroup(object sender, DevExpress.Web.ASPxGridView.CustomColumnSortEventArgs e) {
    if(e.Column.FieldName == "UnitPrice") {
        int res = 0;
        double x = Math.Floor(Convert.ToDouble(e.Value1) / 10);
        double y = Math.Floor(Convert.ToDouble(e.Value2) / 10);
        res = Comparer.Default.Compare(x, y);
        if(res < 0) res = -1;
        else if(res > 0) res = 1;
        if(res == 0 || (x > 9 && y > 9)) res = 0;
        e.Result = res;
        e.Handled = true;
    }
}

protected void grid_CustomGroupDisplayText(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewColumnDisplayTextEventArgs e) {
    if(e.Column.FieldName == "UnitPrice") {
        double d = Math.Floor(Convert.ToDouble(e.Value) / 10);
        string displayText = string.Format("{0:c} - {1:c} ", d * 10, ((d + 1) * 10)-0.01);
        if(d > 9) displayText = string.Format(">= {0:c} ", 100);
        e.DisplayText = displayText;
    }
}

Merged Group Rows

This functionality merges nested group rows into root-level rows, as shown on the image below. To enable this behavior, set the MergeGroupsMode property to Always.

Run Demo: ASPxGridView - Merging Groups

Specify the following properties to customize merged groups and rows:

GroupFormatForMergedGroup
Specifies the text pattern for column-value pairs.
GroupFormatForMergedGroupRow
Specifies the text pattern for group rows in merged state.
MergedGroupSeparator
Specifies the separator between column-value pairs within merged group rows.

ASPxGridView-MergedGroups

<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="false">
    <Columns>
        <dx:GridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:GridViewDataColumn FieldName="City" GroupIndex="1" />
        <%--...--%>
    </Columns>
    <Settings ShowGroupPanel="true" GroupFormatForMergedGroupRow="{0} : {1}"
        GroupFormatForMergedGroup="{0} - {1}" />
    <SettingsBehavior MergeGroupsMode="Always" AutoExpandAllGroups="true" />
    <GroupSummary>
        <dx:ASPxSummaryItem SummaryType="Count" FieldName="City" />
    </GroupSummary>
</dx:ASPxGridView>

Fixed (Sticky) Group Rows

ASPxGridView allows you to enable sticky group rows – the control fixes a group row to the top border while a user scrolls data within that group. To enable this behavior, set the AllowFixedGroups property to true. You can also specify the FixedGroupRow property to customize the image that indicates a sticky group row.

Run Demo: ASPxGridView - Fixed Groups

<dx:ASPxGridView ID="Grid" ClientInstanceName="grid" runat="server" KeyFieldName="CustomerID"
    AutoGenerateColumns="false">
    <Columns>
        <%--..--%>
        <dx:GridViewDataColumn FieldName="Country" GroupIndex="0" />
    </Columns>
    <Settings ShowGroupPanel="True" VerticalScrollBarMode="Visible" VerticalScrollableHeight="300" />
    <SettingsBehavior AllowFixedGroups="true" />
    <Images>
        <FixedGroupRow Url="custom.png" />
    </Images>
</dx:ASPxGridView>

Custom Layout and Content within Group Rows

ASPxGridView allows you to customize the layout and content within group rows. To enable this functionality, specify one of the following properties:

GroupRow
Specifies a template to display group rows.
GroupRowContent
Specifies a template to display the group row content.

For more information on templates in the grid, refer to the following topic: ASPxGridView - Templates.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="grid" AutoGenerateColumns="False">
    <Settings ShowGroupButtons="False" ShowGroupPanel="True" />
    <Columns>
        <%--...--%>
    </Columns>
    <Templates>
        <GroupRowContent>
            <dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" OnInit="ASPxCheckBox1_Init" />
            <%# Container.GroupText + Container.KeyValue%>
        </GroupRowContent>
    </Templates>
</dx:ASPxGridView>

function ExpandCollapse(sender, index) {
    if (sender.GetChecked())
        grid.ExpandRow(index);
    else
        grid.CollapseRow(index);
}

protected void ASPxCheckBox1_Init(object sender, EventArgs e) {
    ASPxCheckBox cb = sender as ASPxCheckBox;
    GridViewGroupRowTemplateContainer container = cb.NamingContainer as GridViewGroupRowTemplateContainer;
    if (ASPxGridView1.IsRowExpanded(container.VisibleIndex))
        cb.Checked = true;
    cb.ClientSideEvents.CheckedChanged = string.Format("function (s, e) {{ ExpandCollapse(s, {0}); }}", container.VisibleIndex);
}