Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.GroupBy(String) Method

Groups data by values of the specified column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public void GroupBy(
    string columnFieldName
)

#Parameters

Name Type Description
columnFieldName String

Specifies the name of the data source field that supplies data for the processed column. If the component does not contain the column that corresponds to the specified data field, an exception occurs.

#Remarks

The GroupBy method allows you to group grid data in code regardless of the DxGrid.AllowGroup or DxGridDataColumn.AllowGroup property value.

The following code snippet uses different method overloads.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        ShowGroupPanel="true"
        CustomizeCellDisplayText="OnCustomizeCellDisplayText"
        @ref="@MyGrid">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate"
                      DisplayFormat="d"
                      GroupInterval="GridColumnGroupInterval.DateMonth" />
        <DxGridDataColumn FieldName="Customer"
                      SortMode="GridColumnSortMode.DisplayText"
                      GroupInterval="GridColumnGroupInterval.DisplayText" />
        <DxGridDataColumn FieldName="Freight"
                      DisplayFormat="n2"/>
    </Columns>
</DxGrid>

<DxButton Click="@(() => MyGrid.GroupBy("OrderDate"))">Group by OrderDate</DxButton>
<DxButton Click="@(() => MyGrid.GroupBy("Customer", 0))">Group by Customer, Group Index = 0</DxButton>

@code {
    IGrid MyGrid { get; set; }
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Orders
            .Include(i => i.Customer)
            .Include(i => i.OrderDetails)
            .Include(i => i.ShipViaNavigation)
            .ToList();
    }

    void OnCustomizeCellDisplayText(GridCustomizeCellDisplayTextEventArgs e) {
        if (e.FieldName == "Customer") {
            var customer = (Customer)e.Value;
            e.DisplayText = $"{customer.CompanyName} ({customer.Country}, {customer.City})";
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Grid - GroupBy Method

Watch Video: Grid - Group Data

For more information about data grouping in the Grid component, refer to the following topic: Group Data in Blazor Grid.

#Implements

See Also