Grouping

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")

Group Summary

FlexGrid allows you to show data summaries for the whole grid or for each group by setting the Aggregate 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 property. The GroupSummaryPosition property allows you to customize the display location of aggregate Group summaries by using the GroupSummaryPosition 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.

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

Controller Code

public IActionResult Index()
{
    return View(Sale.GetData(15));
}

View Code

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<c1-flex-grid auto-generate-columns="false" is-read-only="true" group-by="Country" group-summary-position="Bottom">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0" aggregate="Avg"></c1-flex-grid-column>
</c1-flex-grid>

Sticky Group Headers

FlexGrid supports sticky group headers through the StickyGroupHeaders property.

When grouping is enabled, the active group row remains visible at the top of the grid while users scroll through its child records. This preserves group context when a group contains more rows than the visible viewport.

StickyGroupHeaders supports standard FlexGrid grouping and can be used with single-level or multi-level group hierarchies.

Behavioral

When stickyGroupHeaders is enabled:

• Context Preservation: Keeps the current group header visible at the top during vertical scrolling and updates dynamically as new group rows scroll into view.

• Multi-Level Grouping: When multiple grouping levels are applied (e.g., grouped by ShipCountry and ShipCity), one header is pinned per level and stacked hierarchically from parent to child.

• Interactive Headers: Pinned sticky group headers retain full interactivity. Users can click, select, collapse, or expand them directly from the sticky header area.

• Sticky Column Headers: If StickyHeaders is also enabled, sticky group headers position themselves directly beneath the sticky column headers.

Keyboard Interaction

Sticky group headers preserve standard keyboard navigation and selection behavior.

When keyboard navigation approaches the sticky area, the grid scrolls as necessary to maintain the active selection. As the active group path changes, the selection remains synchronized with the corresponding group context.

Code Snippet

Controller

The controller action queries the entity set and passes the collection to the view:

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

ASP.NET Core

In ASP.NET Core, declare the sticky-group-headers attribute on the <c1-flex-grid> tag helper:

@model IEnumerable<Order>

<c1-flex-grid id="theFlexGrid"
              height="350px"
              is-read-only="true"
              show-groups="true"
              auto-generate-columns="false"
              group-by="ShipCountry"
              sticky-group-headers="true">

    <c1-items-source source-collection="@Model"></c1-items-source>

    <c1-flex-grid-column binding="OrderID" header="Id"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShipCountry" header="Ship Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShipCity" header="Ship City"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShippedDate" header="Shipped Date"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Freight" header="Freight" format="c2" aggregate="Sum"></c1-flex-grid-column>

</c1-flex-grid>

Limitations:

StickyGroupHeaders applies only to standard grouped FlexGrid views. The feature does not support the following scenarios:

• Grouping is not active.

• The grid uses a hierarchy created through ChildItemsPath.

• Frozen rows, frozen columns, or frozen cells are enabled through FrozenRows or FrozenColumns.

• Group summary rows or aggregate totals need to appear in the sticky header area.