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.CollapseAllGroupRows() Method

Collapses all group rows.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public void CollapseAllGroupRows()

#Remarks

The following code snippet implements buttons that allow users to expand and collapse group rows.

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

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

<DxButton Click="@(() => MyGrid.ExpandGroupRow(0))">Expand Group 0</DxButton>
<DxButton Click="@(() => MyGrid.ExpandAllGroupRows())">Expand All Groups</DxButton>

<DxButton Click="@(() => MyGrid.CollapseGroupRow(0))">Collapse Group 0</DxButton>
<DxButton Click="@(() => MyGrid.CollapseAllGroupRows())">Collapse All Groups</DxButton>

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

Expand/Collapse Group Rows

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

See Also