aspnet-3715-components-grid-view-concepts-group-data.md
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.
<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.
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.
<dx:ASPxGridView ID="grid" runat="server">
<%--...--%>
<Settings ShowGroupPanel="true" ShowGroupedColumns="true"/>
</dx:ASPxGridView>
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.
Use one of the following API members to clear the grouping applied to a particular column:
Set a column’s GroupIndex property to -1.
Call a column’s UnGroup() method.
Call the control’s server-side UnGroup(GridViewColumn) method.
Call the control’s client-side UnGroup(column) method.
| 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. |
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.
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.
Call the control’s server-side ExpandRow or ExpandAll() methods.
Call the control’s client-side ExpandRow(visibleIndex) or ExpandAll methods.
Use one of the following API members to collapse group rows:
Call the control’s server-side CollapseRow or CollapseAll() methods.
Call the control’s client-side CollapseRow(visibleIndex) or CollapseAll methods.
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.
<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>
ASPxGridView allows you to apply a custom grouping algorithm to its data. Follow the steps below to enable this functionality:
Custom.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.
<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;
}
}
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
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.
<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>
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>
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.
<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);
}
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