Skip to main content
A newer version of this page is available. .

DxGridDataColumn.AllowGroup Property

Specifies whether users can group data by this column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool? AllowGroup { get; set; }

Property Value

Type Description
Nullable<Boolean>

true to allow users to group 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.

Group Data

Set the AllowGroup property to false to disable data grouping for an individual column.

@using Microsoft.EntityFrameworkCore
@using Grid.Northwind
@inject NorthwindContext Northwind

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

@code {
    object GridDataSource { get; set; }

    protected override void OnInitialized() {
        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})";
        }
    }
}

To disable grouping for the entire grid, use the DxGrid.AllowGroup property.

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

Note

The Grid does not support data grouping when you use a GridDevExtremeDataSource.

Run Demo: Grid - Group Data

Implements

See Also