Skip to main content

DxGrid.ExpandDetailRow(Int32) Method

Expands the specified detail row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void ExpandDetailRow(
    int visibleIndex
)

Parameters

Name Type Description
visibleIndex Int32

A zero-based integer visible index that identifies the detail row.

Remarks

Specify the DetailRowTemplate to enable a master-detail relationship in the grid. A user can click a data row’s expand button to expand/collapse the row and access detail data.

Grid - Collapse and Expand buttons

Use the ExpandDetailRow and CollapseDetailRow(Int32) methods to expand and collapse detail rows in code. To check whether an individual detail row is expanded, use the IsDetailRowExpanded(Int32) method.

Note

The Grid bound to an Instant Feedback Data Source or GridDevExtremeDataSource loads data asynchronously in small portions (instead of the entire dataset). Before you call the ExpandDetailRow method, call the WaitForRemoteSourceRowLoadAsync(Int32) method to ensure that the specified data row is loaded.

The following code snippet checks the first detail row’s expansion state. If the row is expanded, the button click collapses this row and vice versa.

@inject NwindDataService NwindDataService

<DxGrid @ref="Grid" 
        Data="MasterGridData" >
    <Columns>
        <DxGridDataColumn FieldName="ContactName" SortIndex="0" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
    </Columns>
    <DetailRowTemplate>
        <Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" />
    </DetailRowTemplate>
</DxGrid>

<DxButton Click="OnButtonClick" Text="Expand/Collapse the First Detail Row" />

@code {
    IGrid Grid { get; set; }
    object MasterGridData { get; set; }

    protected override async Task OnInitializedAsync() {
        MasterGridData = await NwindDataService.GetCustomersAsync();
    }

    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {
            Grid.ExpandDetailRow(0);
        }
    }

     void OnButtonClick() {
        if (Grid.IsDetailRowExpanded(0))
            Grid.CollapseDetailRow(0);
        else
            Grid.ExpandDetailRow(0);
    }
}

Grid - Expand/Collapse Detail Rows

See Also