Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
     Grouping Overview
     Grouping Modes and Custom Grouping
     Tutorial: Custom Grouping Algorithms
     Tutorial: Group Row API
     Tutorial: Grouping Basics
     Process Group Rows
     Applying Styles to Group Rows
     Member Table: Grouping
     Member Table: Group Row API and Behavior
     Member Table: Group Summaries
     Member Table: Size, Style, Appearance and Animation
     Member Table: Grouping Modes and Custom Grouping
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Grouping Overview

Expanded Online Video

Learn about the data grouping UI, grouping at design time, options affecting grouping behavior and basic grouping API.

Expanded Overview

GridView and its descendants can group data against one or multiple columns The grouping feature combines rows with identical column values into the same data groups.

An end-user can group data by a particular column by dragging its header from the column header panel or the Customization Form onto the group panel. To ungroup data, remove the column header from the group panel by dragging it. You can also change the order of the group columns using drag-and-drop.

It is also possible to group data by a column by selecting the "Group By This Field" option from the column header context menu. To ungroup data, use the "UnGroup" option from the same menu or "Clear Grouping" from the group panel context menu.

Records are always sorted against group columns. If you group data against an unsorted column, the grid control automatically applies sorting in ascending order by that column. If you remove a column from a group panel, its sort settings are cleared.

If you need to enable sorting/grouping for columns that display custom data, you can implement the System.IComparable interface for a column's object. See MSDN for examples of implementing this interface.

With the GridOptionsView.ShowGroupPanelColumnsAsSingleRow option, you can arrange group column headers in the group panel in a horizontal line instead of a tree.

When dragging column headers into the Data Grid group panel, hold the Ctrl key to dock one header to another. This applies the merged grouping (GridOptionsCustomization.AllowMergedGrouping). Multiple columns group grid data at once.

Merged column grouping blocks can be combined with regular column grouping.

Expanded Grouping in Code

To group data against a column, add that column to a View's collection of group columns by doing one of the following:

  • Set a column's GridColumn.GroupIndex property to a non-negative integer value. This value represents that column's position within the collection of group columns. The GridColumn.GroupIndex property's value determines the grouping level. For instance, if the index is 0, rows are grouped against this column first and then against the following groups of columns. To ungroup a row by a particular column set the column's GridColumn.GroupIndex property to -1.
  • Add a GridColumnSortInfo item at the beginning of the ColumnView.SortInfo collection and set the collection's GridColumnSortInfoCollection.GroupCount property to the number of group columns. If you need data to be grouped by a single column, add a GridColumnSortInfo item that refers to this column at the beginning of the collection and set the GroupCount to 1. If data should be grouped by two columns, add two GridColumnSortInfo objects that refer to these columns at the beginning of the collection and set the GroupCount to 2 and so on.

The ColumnView.SortInfo collection supports the grouping and sorting of columns in a View. A GridColumnSortInfo object represents a collection element. Each element refers to a column (a GridColumn object) and the sort order (ColumnSortOrder value) applied to this column. Data is always sorted against group columns first. Thus, GridColumnSortInfo objects that refer to group columns are always positioned first in the collection. The GridColumnSortInfoCollection.GroupCount property determines the number of group elements. The subsequent elements in the collection refer to the columns used to sort data only. If the GroupCount is 0, no grouping applies to the View, and all the elements refer to sorted columns.

You can use the GridColumnSortInfoCollection.ClearAndAddRange and GridColumnSortInfoCollection.Insert methods can to add elements to the ColumnView.SortInfo collection. The GridColumnSortInfoCollection.ClearAndAddRange method allows you to clear any existing sorting/grouping settings, add new items to the collection and specify a value for the GridColumnSortInfoCollection.GroupCount property.

The following code shows how to group by two columns ("Country" and "City") and sort by another column ("CompanyName"). The previous sorting and grouping settings are cleared. The "Country" and "CompanyName" columns are sorted in ascending order, while the "City" column is sorted in descending order.

To apply merged column grouping, place GridMultiColumnSortInfo object(s) inside the ColumnView.SortInfo collection. The code below applies two grouping layers: merged grouping by "Ship Country", "Ship City" and "Ship Region" columns, followed by the tier two grouping by the "Customer ID" column.

If you have code that consists of multiple statements that change the grouping/sorting settings for columns, the grid re-sorts data after each such statement is executed, by default. You can use the ColumnView.BeginSort and ColumnView.EndSort methods (or alternatively the GridColumnSortInfoCollection.BeginUpdate and GridColumnSortInfoCollection.EndUpdate methods) to prevent excessive re-sorting of data and to perform batch modifications. If you enclose the code that affects grouping/sorting settings for multiple columns within these methods, the data only re-sorts once after the ColumnView.EndSort (GridColumnSortInfoCollection.EndUpdate) method is called. For information on batch modification methods, see the Batch Modifications Overview section.

You can use the GridView.ClearGrouping method to cancel the grouping for all columns. Calling this method before applying new group settings can be useful as it preserves existing sort settings for non-group columns.

The following code shows how to group data against the "Is In Stock" and "Category" columns using their GridColumn.GroupIndex properties

The code that groups columns moves these columns to the group panel and hides them from the View region by default. Set the GridOptionsView.ShowGroupedColumns property to true if you need to have group column data visible when grouping is applied. This property also affects how group columns are hidden when an end-user groups data.

You can still hide the grouping column from the View region if the GridOptionsView.ShowGroupedColumns property is set to true by moving it to the Customization Form or by setting its GridColumn.VisibleIndex property to -1.

The value of the BandedGridOptionsView.ShowGroupedColumns property is true by default for Banded and Advanced Banded Grid Views, and the column remains in the View when you apply grouping to it. Set this property to false to remove the column from the View region when data is grouped by that column.

All grouping columns can also be accessed using the read-only collection referenced by the ColumnView.GroupedColumns property.

Expanded Disabling Grouping

You can use the following properties to prevent an end-user from changing grouping settings:

The following code disables grouping for the first column in a view.

It is possible to control how column headers are dragged within a View by using drag events (GridView.DragObjectStart, GridView.DragObjectOver and GridView.DragObjectDrop). For instance, you can handle the GridView.DragObjectOver event to prevent a column from being dropped at a particular position within a View's group panel.

Expanded Group Rows

Group rows are used to organize data rows into a tree when data grouping is applied. Each data and group row is assigned a unique integer value called the row handle. Row handles determine the order in which rows appear on the screen. For more information on row handles, see the Identifying Rows and Cards document. The Process Group Rows section describes how you can work with group rows (access child rows, expand and collapse groups).

Group rows corresponding to the first group column are displayed in the highest hierarchy level, group rows corresponding to the second group column in the second highest level, etc. Each group row, by default, displays a column caption, grouping value, and group summary text, if any. Use the GridView.GroupFormat property to change the format of the text displayed within group rows. This property is set to {0}: [#image]{1} {2} by default. The {0}, {1} and {2} strings are placeholders for the group column caption, value and group row summary text, respectively. The [#image] string is a placeholder for an image that is displayed when you group by columns containing an ImageComboBoxEdit in-place editor. The following image shows a Grid View with its GridView.GroupFormat property set to a default value.

To get full control over the painting of group rows, handle the GridView.CustomDrawGroupRow event.

The Applying Styles to Group Rows section shows how to specify different styles for different group rows.

Expanded See Also

How would you rate this topic?​​​​​​​