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 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.

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

GroupingController.cs

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

Grouping.cshtml

@using C1.Web.Mvc.Grid
@using TagFlexGrid.Models
@model IEnumerable<Customer>


<c1-flex-grid id="pagingGrid" height="350px" is-read-only="true" show-groups="true"
              auto-generate-columns="false" group-by="Country">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="CustomerID" ></c1-flex-grid-column>
    <c1-flex-grid-column binding="ContactName"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Address"></c1-flex-grid-column>
    <c1-flex-grid-column binding="City"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Region"></c1-flex-grid-column>
    <c1-flex-grid-column binding="PostalCode" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
</c1-flex-grid>
@Html.Partial("_Pager", "pagingGrid")