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

Specifies whether users can group grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(true)]
[Parameter]
public bool AllowGroup { get; set; }

#Property Value

Type Default Description
Boolean true

true to allow users to group grid data; otherwise, false.

#Remarks

The DxGrid allows users to group its data. To enable data grouping and display the Group Panel, set the DxGrid.ShowGroupPanel property to true.

Users can drag and drop a column header onto the Group Panel to group data by this column. They can also drag headers within this panel to change the group order. To ungroup data by a column, users should drag the column header from the Group Panel back to the Column Header Panel.

Set the AllowGroup property to false to disable data grouping in the entire grid.

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

<DxGrid Data="GridDataSource"
        ShowGroupPanel="true"
        AllowGroup="false"
        CustomizeCellDisplayText="OnCustomizeCellDisplayText">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate"
                      DisplayFormat="d" />
        <DxGridDataColumn FieldName="Customer" 
                      SortMode="GridColumnSortMode.DisplayText"
                      GroupIndex="0"
                      GroupInterval="GridColumnGroupInterval.DisplayText"/>
        <DxGridDataColumn FieldName="Freight"
                      DisplayFormat="n2" />
    </Columns>
</DxGrid>

@code {
    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();
    }
}

To disable grouping by individual columns, use the DxGridDataColumn.AllowGroup property.

You can use the column’s GroupIndex property or GroupBy method to group data in code regardless of the AllowGroup property value.

Run Demo: Grid - Group Data

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