Master-Detail View in Blazor Grid

• Sep 09, 2026
• 14 minutes to read

The DevExpress Blazor Grid can display additional information for individual data records in detail rows. You can add nested Grids to detail rows to create master-detail layouts and visualize relationships between data tables.

Add Row Preview

Use the DetailRowTemplate property to display a preview section under each data row. The section can display any content: text, tables, data field values.

The following example uses detail rows to display notes about employees:

Run Demo: Row Preview

@inject NwindDataService NwindDataService

<div class="grid-container">
    <DxGrid Data="GridData"
            DetailRowDisplayMode="GridDetailRowDisplayMode.Always"
            CustomizeElement="Grid_CustomizeElement"
            ShowAllRows="true">
        <Columns>
            <DxGridDataColumn FieldName="FirstName" />
            <DxGridDataColumn FieldName="LastName" />
            <DxGridDataColumn FieldName="Title" />
            <DxGridDataColumn FieldName="HireDate" />
        </Columns>
        <DetailRowTemplate>
            @{
                var employee = (Employee)context.DataItem;
                <text>@employee.Notes</text>
            }
        </DetailRowTemplate>
    </DxGrid>
</div>

@code {
    object GridData { get; set; }

    protected override async Task OnInitializedAsync() {
        GridData = await NwindDataService.GetEmployeesAsync();
    }

    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DetailCell) {
            e.CssClass = "p-2 opacity-75";
        }
    }
}

Add Nested Grids

The Grid component allows you to create master-detail layouts with multiple nested levels. To implement a nested Grid layout, follow the steps below:

1. Add a master DxGrid to a page and configure its data source and columns.
2. Create a separate component for the detail DxGrid. This structure helps avoid unnecessary redraw operations.
3. Add the detail Grid component to the master Grid’s DetailRowTemplate.
4. Use the template’s context object to filter data in the detail Grid.

Run Demo: Nested Grid View Example: Create a Master-Detail Layout

Razor

@inject NwindDataService NwindDataService

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

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

NestedGrid_DetailContent.razor

@inject NwindDataService NwindDataService
<div class="contact-details">
    Contact Phone: @Customer.Phone
</div>
<DxGrid Data="DetailGridData"
        PageSize="5"
        AutoExpandAllGroupRows="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" DisplayFormat="d" GroupIndex="0" />
        <DxGridDataColumn FieldName="ProductName" Width="40%" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="ExtendedPrice" DisplayFormat="c" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                           FieldName="ExtendedPrice"
                           FooterColumnName="ExtendedPrice" />
    </GroupSummary>
</DxGrid>

@code {
    [Parameter]
    public Customer Customer { get; set; }
    object DetailGridData { get; set; }
    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        DetailGridData = invoices
            .Where(i => i.CustomerId == Customer.CustomerId)
            .ToArray();
    }
}

CSS

.contact-details {
    margin-bottom: 0.5rem;
}

Customer.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<Order> Orders { get; set; }
    }
}

Invoice.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}

Program.cs

// ...
builder.Services.AddScoped<NwindDataService>();

Implement Partial Data Loading

In previous examples, the entire detail dataset is loaded in memory. Detail data grid applied a filter to display required records. If you work with a large or remote data source, you may choose to load detail data on demand.

You can display a Loading Panel in the detail area while the nested component retrieves records. The following example implements a nested grid layout where the detail grid loads/generates its data on demand and displays an integrated loading panel during that operation:

View Example: Master-Detail with Partial Loading

Master Grid

@page "/"

@using GridPartialLoading.Data
@inject WeatherForecastService ForecastService

<h2>DevExpress Grid</h2>

@if(forecasts == null) {
    <p><em>Loading...</em></p>
} else {
    <DxGrid Data="@forecasts" 
            AllowSelectRowByClick="true"
            SelectionMode="GridSelectionMode.Single">
        <Columns>
            <DxGridDataColumn FieldName="Date" />
            <DxGridDataColumn FieldName="Summary" />
        </Columns>
        <DetailRowTemplate Context="LineItem">
            @{
                var date = ((WeatherForecast)LineItem.DataItem).Date;
            }
            <DetailContent Date="date" />
        </DetailRowTemplate>
    </DxGrid>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Today);
    }
}

Detail Grid

<DxLoadingPanel Visible=@(Records == null) />

@if(Records != null) {
    <DxGrid Data="@Records">
        <Columns>
            <DxGridDataColumn FieldName="Time" DisplayFormat="f" />
            <DxGridDataColumn FieldName="TemperatureC" Caption="Temperature" />
        </Columns>
    </DxGrid>
}

@code {
    IEnumerable<DayRecord>? Records;

    [Parameter]
    public DateTime Date { get; set; }

    protected override async Task OnInitializedAsync() {
        Records = await GetItemsByDateAsync(Date);
    }

    public class DayRecord {
        public DateTime? Time { get; set; }
        public int? TemperatureC { get; set; }
    }

    protected IEnumerable<DayRecord> GetItemsByDate(DateTime date) {
        var rng = new Random();
        return new[] { 
            new DayRecord { Time = date.AddHours(7), TemperatureC = rng.Next(15, 30) }, 
            new DayRecord { Time = date.AddHours(14), TemperatureC = rng.Next(15, 30) },
            new DayRecord { Time = date.AddHours(21), TemperatureC = rng.Next(15, 30) }
        };
    }

    protected async Task<IEnumerable<DayRecord>> GetItemsByDateAsync(DateTime date) {
        await Task.Delay(1000);
        return GetItemsByDate(date);
    }
}

Export Detail Views

The built-in export engine processes only master view data: column captions, data cell values, and summaries. It does not export template content. To include detail data, use DevExpress Reports to create an intermediate master-detail report, then export the report to a supported file format. Refer to the following topic for additional information: Create a Master-Detail Report.

The following example exports both master and detail views to PDF, CSV, and XLSX files:

View Example: Export Detail Views

Index.razor

@page "/"
@rendermode InteractiveServer
@inject IJSRuntime JS
@using DevExpress.XtraReports.UI
@using GridMasterDetailExport.Data
@using GridMasterDetailExport.Reports

<DxGrid @ref="MasterGrid"
        AllowColumnReorder="false"
        AllowSort="false"
        Data="DataProvider.GetUsers()"
        KeyFieldName="UserID">
    <ToolbarTemplate Context="ctx">
        <DxToolbar>
            <Items>
                <DxToolbarItem Text="Export as PDF" Click="ExportToPdf" />
                <DxToolbarItem Text="Export as XLSX" Click="ExportToXlsx" />
                <DxToolbarItem Text="Export as CSV" Click="ExportToCsv" />
            </Items>
        </DxToolbar>
    </ToolbarTemplate>
    <Columns>
        <DxGridDataColumn FieldName="UserID" />
        <DxGridDataColumn FieldName="UserName" />
    </Columns>
    <DetailRowTemplate Context="ctx">
        @{
            User user = ctx.DataItem as User ?? new();
            var userOrders =
            DataProvider.GetOrders()
            .Where(o => o.UserID == user.UserID);
        }
        <DxGrid @ref="DetailGrid"
                AllowColumnReorder="false"
                AllowSort="false"
                Data="userOrders"
                KeyFieldName="OrderID">
            <Columns>
                <DxGridDataColumn FieldName="OrderID" />
                <DxGridDataColumn FieldName="OrderDate" />
                <DxGridDataColumn FieldName="ProductName" />
            </Columns>
        </DxGrid>
    </DetailRowTemplate>
</DxGrid>

@code {
    public DxGrid? MasterGrid { get; set; }

    public DxGrid? DetailGrid { get; set; }

    private async Task ExportToPdf() {
        using var report = GetReport();
        using var stream = new MemoryStream();
        await report.ExportToPdfAsync(stream);
        await DownloadStreamAsync(stream, "exportResult.pdf");
    }

    private async Task ExportToXlsx() {
        using var report = GetReport();
        using var stream = new MemoryStream();
        await report.ExportToXlsxAsync(stream);
        await DownloadStreamAsync(stream, "exportResult.xlsx");
    }

    private async Task ExportToCsv() {
        using var report = GetReport();
        using var stream = new MemoryStream();
        await report.ExportToCsvAsync(stream);
        await DownloadStreamAsync(stream, "exportResult.csv");
    }

    private XtraReport GetReport() {
        return ReportGenerationHelpers.GetReportFromDxGrid(
            GetVisibleColumnNames(MasterGrid),
            GetVisibleColumnNames(DetailGrid),
            GetRowsExpandedStates()
        );
    }

    private static string[] GetVisibleColumnNames(IGrid? grid) {
        return grid?.GetVisibleColumns()
                    .OfType<DxGridDataColumn>()
                    .Select(c => c.FieldName ?? c.Name).ToArray() ?? [];
    }

    private Dictionary<string, bool> GetRowsExpandedStates() {
        Dictionary<string, bool> masterRowExpandedStates = new();
        for(int i = 0; i < MasterGrid?.GetVisibleRowCount(); i++) {
            if(MasterGrid.GetDataItem(i) is User user) {
                masterRowExpandedStates[user.UserID.ToString()]
                    = MasterGrid.IsDetailRowExpanded(i);
            }
        }
        return masterRowExpandedStates;
    }

    async Task DownloadStreamAsync(Stream stream, string fileName) {

        stream.Seek(0, SeekOrigin.Begin);

        using var streamRef = new DotNetStreamReference(stream);
        await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }
}

ReportGenerationHelpers.cs

using System.Drawing;
using System.Text.Json;
using System.Text.Json.Serialization;
using DevExpress.DataAccess;
using DevExpress.DataAccess.DataFederation;
using DevExpress.DataAccess.ObjectBinding;
using DevExpress.Drawing;
using DevExpress.Drawing.Printing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;
using GridMasterDetailExport.Data;

namespace GridMasterDetailExport.Reports {
    public static class ReportGenerationHelpers {
        public static XtraReport GetReportFromDxGrid(string[] masterColumnNames, string[] detailColumnNames, Dictionary<string, bool> rowExpandedStates) {
            XtraReport report = new XtraReport() {
                ReportUnit = ReportUnit.HundredthsOfAnInch,
                PaperKind = DXPaperKind.Letter,
                Margins = new DXMargins(100, 100, 100, 100)
            };

            #region Styles
            var tableHeaderStyle = new XRControlStyle {
                Name = "tableHeaderStyle",
                TextAlignment = TextAlignment.MiddleCenter,
                BackColor = Color.AliceBlue,
            };
            report.StyleSheet.Add(tableHeaderStyle);

            var tableRowStyle = new XRControlStyle() {
                Name = "tableRowStyle",
                TextAlignment = TextAlignment.MiddleCenter
            };
            report.StyleSheet.Add(tableRowStyle);
            #endregion

            #region DataSource

            var masterDataSource = new ObjectDataSource() {
                Name = "Users",
                DataSource = typeof(DataProvider),
                DataMember = nameof(DataProvider.GetUsers)
            };
            masterDataSource.RebuildResultSchema();

            var detailDataSource = new ObjectDataSource() {
                Name = "Orders",
                DataSource = typeof(DataProvider),
                DataMember = nameof(DataProvider.GetOrders)
            };
            detailDataSource.RebuildResultSchema();

            var fds = ReportGenerationHelpers.CreateFederationDataSource(masterDataSource, detailDataSource, nameof(User.UserID), nameof(Order.UserID), rowExpandedStates);
            #endregion

            float contentWidth = report.PageWidthF - report.Margins.Left - report.Margins.Right;

            report.DataSource = fds;
            report.DataMember = masterDataSource.Name;

            report.AddTableHeaderBand(new RectangleF(0f, 0f, contentWidth, 25f), tableHeaderStyle.Name, masterColumnNames);
            report.AddTableRowBand(new RectangleF(0f, 0f, contentWidth, 25f), tableRowStyle.Name, masterColumnNames, true);
            report.AddDetailReport(
                $"{masterDataSource.Name}.{masterDataSource.Name}{detailDataSource.Name}",
                detailColumnNames,
                new RectangleF(20f, 20f, contentWidth - 20f, 25f),
                tableHeaderStyle.Name,
                tableRowStyle.Name);

            return report;
        }

        static FederationDataSource CreateFederationDataSource(DataComponentBase masterDataSource, DataComponentBase detailDataSource, string parentKeyColumn, string nestedKeyColumn, Dictionary<string, bool> expandedStates) {
            ObjectDataSource expandedStateDataSource = new ObjectDataSource() {
                Name = "ExpandedState",
                DataSource = typeof(ExpandedState),
                DataMember = nameof(ExpandedState.LoadExpandedStates)
            };
            expandedStateDataSource.Parameters.Add(new Parameter(
                "json",
                typeof(string),
                JsonSerializer.Serialize(expandedStates.Select((i) => new ExpandedState() { RowKey = i.Key, IsExpanded = i.Value }))));

            Source masterSource = new Source(masterDataSource.Name, masterDataSource);
            Source detailSource = new Source(detailDataSource.Name, detailDataSource);
            Source expandedStatesSource = new Source("ExpandedState", expandedStateDataSource);


            var masterQuery = masterSource.From()
                .SelectAll()
                .InnerJoin(expandedStatesSource, $"[{masterSource.Name}.{parentKeyColumn}] = [{expandedStatesSource.Name}].[{nameof(ExpandedState.RowKey)}]")
                .Select(nameof(ExpandedState.IsExpanded))
                .Build(masterSource.Name);
            var detailQuery = detailSource.From()
                .SelectAll()
                .Build(detailSource.Name);

            var federationDataSource = new FederationDataSource();
            federationDataSource.Queries.AddRange([masterQuery, detailQuery]);

            var relation = new FederationMasterDetailInfo(masterSource.Name, detailSource.Name, new FederationRelationColumnInfo(parentKeyColumn, nestedKeyColumn));
            federationDataSource.Relations.Add(relation);
            federationDataSource.RebuildResultSchema();

            return federationDataSource;
        }

        public static void AddTableHeaderBand(this XtraReportBase report, RectangleF rect, string styleName, string[] columnCaptions) {
            var headerBand = new GroupHeaderBand() {
                HeightF = rect.Height,
                RepeatEveryPage = true,
                KeepTogether = true,
                GroupUnion = GroupUnion.WithFirstDetail
            };
            report.Bands.Add(headerBand);

            headerBand.AddXRTable(columnCaptions, rect, styleName,
                (table) => {
                    table.Borders = BorderSide.All;
                },
                (cell, caption) => {
                    cell.Text = caption;
                });
        }

        public static void AddTableRowBand(this XtraReportBase report, RectangleF rect, string styleName, string[] fieldNames, bool isExpandable = false) {
            var rowBand = new DetailBand() {
                HeightF = rect.Height,
                KeepTogether = true,
                KeepTogetherWithDetailReports = true                
            };
            report.Bands.Add(rowBand);

            rowBand.AddXRTable(fieldNames, rect, styleName,
                (table) => {
                    if(isExpandable) {
                        table.ExpressionBindings.Add(new ExpressionBinding("BeforePrint", "Borders", $"IIf([DataSource.IsFirstRow] || !PrevRowColumnValue('{nameof(ExpandedState.IsExpanded)}'),'Left,Right,Bottom', 'All')\r\n"));
                    }
                    else {
                        table.Borders = BorderSide.Left | BorderSide.Right | BorderSide.Bottom;
                    }
                },
                (cell, fieldName) => {
                    cell.ExpressionBindings.Add(
                       new("BeforePrint", "Text", $"[{fieldName}]"));
                });
        }

        public static void AddEmptyTableFooterBand(this XtraReportBase report, float height) {
            var footerBand = new GroupFooterBand() {
                HeightF = height,
                GroupUnion = GroupFooterUnion.WithLastDetail
            };
            report.Bands.Add(footerBand);
            footerBand.Controls.Add(new XRPanel() { HeightF = height });
        }

        public static void AddDetailReport(this XtraReportBase report, string dataMember, string[] columns, RectangleF rect, string headerStyleName, string rowStyleName) {
            var detailReportBand = new DetailReportBand() {
                DataSource = report.DataSource,
                DataMember = dataMember
            };
            report.Bands.Add(detailReportBand);
            detailReportBand.ExpressionBindings.Add(new ExpressionBinding("BeforePrint", "Visible", $"[{nameof(ReportGenerationHelpers.ExpandedState.IsExpanded)}]"));

            detailReportBand.AddTableHeaderBand(rect, headerStyleName, columns);
            detailReportBand.AddTableRowBand(new RectangleF(rect.X, 0f, rect.Width, rect.Height), rowStyleName, columns);
            detailReportBand.AddEmptyTableFooterBand(rect.Height);
        }

        private static void AddXRTable<T>(this Band band, T[] columns, RectangleF rect, string styleName, Action<XRTable> tableInitializer, Action<XRTableCell, T> cellInitializer) {
            var table = new XRTable();
            band.Controls.Add(table);
            table.BeginInit();
            table.LocationF = rect.Location;
            table.SizeF = rect.Size;
            table.StyleName = styleName;
            tableInitializer(table);

            var row = new XRTableRow();
            table.Rows.Add(row);

            foreach(T column in columns) {
                XRTableCell cell = new XRTableCell();
                row.Cells.Add(cell);
                cellInitializer(cell, column);
            }

            table.EndInit();
        }

        public class ExpandedState {
            [JsonRequired]
            public string RowKey { get; set; } = "";
            [JsonRequired]
            public bool IsExpanded { get; set; }

            public static IEnumerable<ExpandedState>? LoadExpandedStates(string json) {
                return JsonSerializer.Deserialize<List<ExpandedState>>(json);
            }
        }
    }
}

DownloadHelper.js

async function downloadFileFromStream(fileName, contentStreamReference) {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
}

Expand and Collapse Detail Rows

Set the AutoCollapseDetailRow property to true to automatically collapse an expanded detail row when a user expands another detail row.

Users can click expand/collapse buttons to change a detail row’s expanded state. They can also focus a detail row and press the Left Arrow or Right Arrow key to expand or collapse this row. To change a detail row’s state in code, call the following methods:

CollapseAllDetailRows

Collapses all detail rows.

CollapseDetailRow

Collapses the specified detail row.

ExpandDetailRow

Expands the specified detail row.

To determine a detail row’s expanded state, call the IsDetailRowExpanded method.

Detail Rows and Expand Buttons: Display Modes

Once you specify the DetailRowTemplate property, the Grid component displays expand/collapse buttons. Users can click them to display or hide detail rows. You can use the following properties to change the visibility of these buttons and detail rows:

DetailExpandButtonDisplayMode

Set this property to Never to hide the built-in expand/collapse buttons. You can still expand or collapse detail rows in code or implement custom buttons.

DetailRowDisplayMode

Use this property to keep detail rows always visible or hidden. The following modes are available:

• Always — DxGrid hides collapse buttons, displays all detail rows, and prevents you from collapsing them in code.
• Never — DxGrid hides expand buttons, hides all detail rows, and prevents you from expanding them in code.

The following code sample hides expand/collapse buttons. Users can click a row to display its detail data:

Razor

@inject NwindDataService NwindDataService

<DxGrid @ref="Grid"
        Data="MasterGridData"
        AutoCollapseDetailRow="true" 
        DetailExpandButtonDisplayMode="GridDetailExpandButtonDisplayMode.Never"
        HighlightRowOnHover="true"
        RowClick="OnRowClick">
    <Columns>
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="CompanyName" Width="35%" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
    </Columns>
    <DetailRowTemplate>
        <NestedGrid_DetailContent Customer="(Customer)context.DataItem" />
    </DetailRowTemplate>
</DxGrid>

@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 OnRowClick(GridRowClickEventArgs e) {
        if (!e.Grid.IsDetailRowExpanded(e.VisibleIndex)) {
            e.Grid.BeginUpdate();
            e.Grid.ExpandDetailRow(e.VisibleIndex);
            e.Grid.EndUpdate();
        }
    }
}

NestedGrid_DetailContent.razor

@inject NwindDataService NwindDataService
<div class="contact-details">
    Contact Phone: @Customer.Phone
</div>
<DxGrid Data="DetailGridData"
        PageSize="5"
        AutoExpandAllGroupRows="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" DisplayFormat="d" GroupIndex="0" />
        <DxGridDataColumn FieldName="ProductName" Width="40%" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="ExtendedPrice" DisplayFormat="c" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                           FieldName="ExtendedPrice"
                           FooterColumnName="ExtendedPrice" />
    </GroupSummary>
</DxGrid>

@code {
    [Parameter]
    public Customer Customer { get; set; }
    object DetailGridData { get; set; }
    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        DetailGridData = invoices
            .Where(i => i.CustomerId == Customer.CustomerId)
            .ToArray();
    }
}

CSS

.contact-details {
    margin-bottom: 0.5rem;
}

Customer.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<Order> Orders { get; set; }
    }
}

Invoice.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}

Program.cs

// ...
builder.Services.AddScoped<NwindDataService>();