# Data Grouping

## Content



FlexGrid supports data grouping through DataCollection, as well as separately through UI, which is shipped under a separate assembly, C1.WPF.FlexGridGroupPanel. FlexGridGroupPanel is available as a separate control to keep the footprint of FlexGrid control. This section discusses grouping data over a column.

### .NET Framework

To group data over a column using FlexGrid's internal collection, you can use the following code. This example uses the sample created in [Quick Start](/componentone/docs/wpf/online-flexgrid/FlexGridQuickStart) topic. In this example, **GroupDescriptions** property is used to group the data by adding an object of the **PropertyGroupDescription** class to the collection. This class describes the grouping of items using a property name ("Country" property in this case) as the criterion.

![WPF FlexGrid grouping](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/flexgridgrouping.png)

```csharp
//group grid's Collection for Country property
grid.CollectionView.GroupDescriptions.Add(new PropertyGroupDescription("Country"));
```

### .NET

To group data over a column (say "Country") using FlexGrid's internal collection, you can use the following code. This example uses the sample created in [Quick Start](/componentone/docs/wpf/online-flexgrid/FlexGridQuickStart) topic. In this example, **GroupAsync** method is used to group data collection according to the specified group fields.

![WPF FlexGrid grouping](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/flexgridgroup.png)

```csharp
//group grid's Collection for Country property
grid.DataCollection.GroupAsync("Country");
```

You can also group data in FlexGrid using column-header or column options menu simply by handling **OptionsLoading** event for the column and using the **GroupAsync** method, as shown in the following code.

| ![WPF FlexGrid grouping using column header](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/flexgrid-group.gif) |
| --- |

```csharp
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        //Initialize myList
        var myList = Customer.GetCustomerList(12);
        //set grid's itemsSource to myList
        grid.ItemsSource = myList;
        //group grid's Collection for Country property
        grid.DataCollection.GroupAsync("Country");
        //handling OptionsLoading event for 
        foreach (var col in grid.Columns)
            col.OptionsLoading += Col_OptionsLoading;
    }
    private void Col_OptionsLoading(object? sender, C1.WPF.Grid.GridColumnOptionsLoadingEventArgs e)
    {
        //Remove default options
        e.Menu.Items.Clear();
        var menuItem = new C1MenuItem();
        menuItem.Header = "Group By : " + e.Column.ColumnName;
        menuItem.Click += (s, oe) =>
        {
            //group by column
            grid.DataCollection.GroupAsync(e.Column.ColumnName);
            //close the menu
            e.Close();
        };
        e.Menu.Items.Add(menuItem);
    }
}
```

In addition, data can be grouped in FlexGrid using the following two approaches discussed in the following topics.

*   [Group Data using DataCollection](/componentone/docs/wpf/online-flexgrid/FlexGridFeatures/DataGrouping/DataGroupingDataCollection)
*   [Group Data using FlexGridGroupPanel](/componentone/docs/wpf/online-flexgrid/FlexGridFeatures/DataGrouping/HowtoUseC1FlexGridGroupPanelControl)