Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Collapse]Grouping
     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]Sorting
   [Expand]Summaries
   [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]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Grouping Basics

This walkthrough is a transcript of the Grouping Basics video available on the DevExpress YouTube Channel.

The tutorial starts with the data grouping UI available in the DevExpress WinForms grid by default. It then shows you how to apply the data grouping at design time and goes on to cover related options, such as:

  • using predefined value ranges to group data;
  • anchoring group rows to the top of the view when scrolling large data groups;
  • changing group row paint style;
  • automatically expanding group rows;
  • disabling end-user data grouping.

Finally, the tutorial will guide you through the basic API you can use to group data in code.

Expanded Default Behavior

To group data by a specific column, end-users can drag a header from the column header panel onto the group panel. The GridControl automatically sorts data groups in ascending order. To reverse the sort order, click the column header.

To expand a group row and thus access its child data rows, double-click anywhere on the group row or click the row's expand button.

One more way to group data is by selecting the Group by This Column item from the column header context menu. With two or more columns in the group panel, rows will form a hierarchy according to grouping column values.

You can drag a column header to another position within the group panel.

When dragging column headers, hold the Ctrl key to dock one header to another. This allows you to group grid data by multiple columns at once.

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

To ungroup data, drag a column header from the group panel to the column header panel, or right-click a column header and select Ungroup from the context menu. To remove all grouping, right-click the group panel and select Clear Grouping.

Expanded Grouping at Design-Time

At design time, you can use the same drag-and drop operations and context menus. In addition to that, you can use a column's GridColumn.GroupIndex property. Set this property to a non-negative integer value, which specifies the grouping level. Set it to 0 for the Received column and to 1 for the Read column. As a result, the Received column will be at the root grouping level, the Read column will be at the second level.

Run the application and try expanding and collapsing rows to see the logic behind data row grouping.

Expanded Predefined Value Ranges

By default, data groups contain identical values, but the grid also allows you to group ranges of values together. This can be easily demonstrated with date/time columns. Open the Property grid displaying the Received column's settings and set the GridColumn.GroupInterval property to ColumnGroupInterval.DateRange. As a result, the grid rows are combined into date ranges including "Today", "Yesterday", "Last Week", and so on.

Expanded Related Options

Next, review the options that affect grid behavior as it concerns data grouping.

By default, grouping column values are only displayed within group rows and the columns are not shown within the View. If you need to display them, expand the grid view's GridView.OptionsView property and enable the GridOptionsView.ShowGroupedColumns option. You'll see that the grouping column now stays within the View.

The View's GridOptionsView.GroupDrawMode property specifies the paint style for group rows. Let's change this property value. The paint style typically affects the height of group rows and indents of data groups.

Now expand the View's GridView.OptionsBehavior property and enable the GridOptionsBehavior.AllowFixedGroups option. When scrolling through grouped data, the top group row is anchored to the top of the grid and is always displayed. A special glyph indicates that you've already scrolled past a part of rows in this group.

Data groups are usually collapsed after grouping operations. To automatically expand all the group rows, set the GridOptionsBehavior.AutoExpandAllGroups property to true. See how all data rows become visible if you change grouping.

Expanded Restricting End-User Capabilities

The GridControl allows you to prevent end-users from changing the grouping conditions already applied to the grid. Set a column's OptionsColumn.AllowGroup property to false to prevent end-users from grouping against this column. To do the same for all columns within a view, disable the View's GridOptionsCustomization.AllowGroup property. In addition, you can hide the group panel using the View's GridOptionsView.ShowGroupPanel property.

Expanded Grouping in Code

The next step is to see how to group grid data in code. Note that this works regardless of the View's GridOptionsCustomization.AllowGroup and the column's OptionsColumn.AllowGroup options.

Group data by the Received and Read columns in a button's Click event handler. First, obtain the corresponding two grid column objects. Clear existing group settings by calling the View's GridView.ClearGrouping method. Then, use the GridColumn.GroupIndex property to set required grouping levels. Note that the GridControl will re-sort its data after each statement – three times in our example. To prevent excessive updates, use the ColumnView.BeginSort and ColumnView.EndSort methods. In this case, the grid view will be updated only once.

Run the application and click the Group button. As a result, grid data is grouped by the Received and Read columns.

Another way to apply grouping to grid columns is using the View's ColumnView.SortInfo collection. Call the GridColumnSortInfoCollection.ClearAndAddRange method to clear existing sorting/ grouping settings, and then sort and group data as needed. Pass an array of two GridColumnSortInfo elements as the first parameter of the method. These elements apply sorting to the Received and Read columns in ascending order. Pass 2 as the second parameter thus indicating that data grouping, not sorting, needs to be applied. The method updates the View only once, so you don't need to use the ColumnView.BeginSort and ColumnView.EndSort methods.

Now run the application again and click the Group button to see the result.

To expand all group rows in the Expand All Groups button's Click event handler, use the View's GridView.ExpandAllGroups method. Similarly, write the Click event handler for the Collapse All Groups button with the GridView.CollapseAllGroups method call.

Run the application and group data by clicking the Group button. When you click the Expand All Groups button, all data rows become visible. To collapse group rows, click the Collapse All Groups button.

Expanded See Also

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