Back to Devexpress

Group Data

aspnet-3715-components-grid-view-concepts-group-data.md

latest16.8 KB
Original Source

Group Data

  • Oct 06, 2023
  • 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.AllowGroupSpecifies grouping availability at the control level.GridViewDataColumn.Settings.AllowGroupSpecifies grouping availability at the column level. If this property value is Default, the column’s behavior depends on the control-level setting.

aspx
<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.

aspx
<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.

  • Call a column’s GroupBy() method.

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

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

Clear Grouping

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

API memberTypeDescription
ColumnGroupingEventFires before the grid groups its data by column values.
BeforeColumnSortingGroupingEventFires before a column is sorted or grouped.
IsGroupRow(Int32)MethodIndicates whether the specified row is a group row.
GetGroupedColumns()MethodReturns a collection of grouped columns.
GroupCountPropertyGets the number of grouped columns.
GroupFormatPropertySpecifies the text pattern for group rows.
ParentGroupRowsPropertySpecifies the settings of an image that indicates to which group the data row belongs.
GroupPanelPropertySpecifies the appearance of the Group Panel.
GroupRowPropertySpecifies 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:

Collapse Group Rows

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

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.

aspx
<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.

aspx
<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>
csharp
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;
    }
}
vb
Protected Sub grid_CustomColumnGroup(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridView.CustomColumnSortEventArgs)
    If e.Column.FieldName = "UnitPrice" Then
        Dim res As Integer = 0
        Dim x As Double = Math.Floor(Convert.ToDouble(e.Value1) / 10)
        Dim y As Double = Math.Floor(Convert.ToDouble(e.Value2) / 10)
        res = Comparer.[Default].Compare(x, y)

        If res < 0 Then
            res = -1
        ElseIf res > 0 Then
            res = 1
        End If

        If res = 0 OrElse (x > 9 AndAlso y > 9) Then res = 0
        e.Result = res
        e.Handled = True
    End If
End Sub

Protected Sub grid_CustomGroupDisplayText(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridView.ASPxGridViewColumnDisplayTextEventArgs)
    If e.Column.FieldName = "UnitPrice" Then
        Dim d As Double = Math.Floor(Convert.ToDouble(e.Value) / 10)
        Dim displayText As String = String.Format("{0:c} - {1:c} ", d * 10, (d + 1) * 10)
        If d > 9 Then displayText = String.Format(">= {0:c} ", 100)
        e.DisplayText = displayText
    End If
End Sub

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:

GroupFormatForMergedGroupSpecifies the text pattern for column-value pairs.GroupFormatForMergedGroupRowSpecifies the text pattern for group rows in merged state.MergedGroupSeparatorSpecifies the separator between column-value pairs within merged group rows.

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

aspx
<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:

GroupRowSpecifies a template to display group rows.GroupRowContentSpecifies a template to display the group row content.

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

aspx
<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>
js
function ExpandCollapse(sender, index) {
    if (sender.GetChecked())
        grid.ExpandRow(index);
    else
        grid.CollapseRow(index);
}
csharp
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);
}
vb
Protected Sub ASPxCheckBox1_Init(ByVal sender As Object, ByVal e As EventArgs)
    Dim cb As ASPxCheckBox = TryCast(sender, ASPxCheckBox)
    Dim container As GridViewGroupRowTemplateContainer = TryCast(cb.NamingContainer, GridViewGroupRowTemplateContainer)
    If ASPxGridView1.IsRowExpanded(container.VisibleIndex) Then
        cb.Checked = True
    End If
    cb.ClientSideEvents.CheckedChanged = String.Format("function (s, e) {{ ExpandCollapse(s, {0}); }}", container.VisibleIndex)
End Sub