# Grouping

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



Grouping refers to combining rows based on column values. When grouping is applied to a grid, it automatically sorts the data, splits it into groups, and adds collapsible group rows above or below each group.

FlexGrid supports column-wise grouping of grid data through the CollectionView class as a datasource. You can configure group description by using the **GroupBy** method in view. You can also add grouping using JavaScript by adding GroupDescription objects to the **CollectionView.GroupDescriptions** property. Here, the column for grouping the grid data is specified in the code.

You can customize the text displayed in group header rows using the [GroupHeaderFormat](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.GroupHeaderFormat.html) property. By default, it displays the name of the group, followed by the current group and the number of items in the group. To format the aggregated data in the group header for a particular column, you can set the **Format** property on each Column object.

The following image shows how the FlexGrid appears on using the **GroupBy** method. The example uses table, **Customer** from the **NWind.mdb** database.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridgrouping.png)

The following code examples demonstrate how to enable Grouping in the FlexGrid:

#### In Code

**GroupingController.cs**

```csharp
public ActionResult Grouping()
{
    var nwind = new C1NWindEntities();
    return View(nwind.Customers);
}
```

**Grouping.cshtml**

```razor
@using MVCFlexGrid.Models
@model IEnumerable<Customer>
@(Html.C1().FlexGrid<Customer>()
.Id("pagingGrid")
.AutoGenerateColumns(false)
.Height(300)
.Width(840)
.IsReadOnly(true)
.Bind(Model)
.GroupBy("Country")
    .Columns(columns =>
        {
            columns.Add(column => column.Binding("CustomerID"));
            columns.Add(column => column.Binding("ContactName"));
            columns.Add(column => column.Binding("Address"));
            columns.Add(column => column.Binding("City"));
            columns.Add(column => column.Binding("Region"));
            columns.Add(column => column.Binding("PostalCode").Format("p0"));
            columns.Add(column => column.Binding("Country"));
        })
)
@Html.Partial("_Pager", "pagingGrid")
```

## Group Summary

FlexGrid allows you to show data summaries for the whole grid or for each group by setting the [Aggregate](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.ColumnBase.Aggregate.html) property on the columns. This property lets you aggregate the data for each column and show the group aggregates in the group header for that column. By default, the group aggregate or group summary is displayed at the top. However, you can change the display location of group aggregate by using [GroupSummaryPosition](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.GroupSummaryPosition.html) property. The **GroupSummaryPosition** property allows you to customize the display location of aggregate Group summaries by using the [GroupSummaryPosition](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.GroupSummaryPosition.html) enumeration. This enumeration provides the flexibility to choose between top and bottom positions to display the group summary row.

The following image showcases how the group rows contain the sum of the 'Amount' and the average of 'Discount' columns for each group.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgrid-groupsummary.png)

The following code showcases how to show group summary or aggregate and set its position. This example uses the data from the Sale.cs class which is used in the [Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart) topic.

**Controller Code**

```csharp
public ActionResult Index()
{
    return View(Sale.GetData(15));
}
```

**View Code**

```razor
@using C1.Web.Mvc.Grid
@using FlexGridFeatures.Models 
@model IEnumerable<Sale>
@(Html.C1().FlexGrid<Sale>()
.AutoGenerateColumns(false)
.Bind(Model)
.IsReadOnly(true)
.GroupBy("Country")
.GroupSummaryPosition(GroupSummaryPosition.Bottom)
.Columns(columns =>
    {
        columns.Add(column => column.Binding("ID"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product"));
        columns.Add(column => column.Binding("Amount").Format("c").Width("*").Align("center").Aggregate(Aggregate.Sum));
        columns.Add(column => column.Binding("Discount").Format("p0").Aggregate(Aggregate.Avg));
    }))
```