如何封装DxGrid组件并动态配置DetailRowTemplate？

原始需求 #

现有如下DxGrid实例代码：

<DxGrid @ref="EffortGrid"
        CssClass="dx-datagrid"
        Data="@(((OrgDashPageModel.OrgModel)contextOrg.DataItem).Efforts)"
        AutoCollapseDetailRow="true"
        PageSize="10"
        PageSizeSelectorVisible="true"
        PageSizeSelectorAllRowsItemVisible="true"
        PageSizeSelectorItems="@(new[] { 5, 10, 20, 50, 100 })"
        KeyboardNavigationEnabled="true">
    <Columns>
        <DxGridDataColumn Caption="Subject" FieldName="@nameof(OrgDashPageModel.EventPageModel.Subject)" />
        <DxGridDataColumn Caption="Type" FieldName="@nameof(OrgDashPageModel.EventPageModel.Type)" />
        <DxGridDataColumn Caption="Date" FieldName="@nameof(OrgDashPageModel.EventPageModel.When)" />
        <DxGridDataColumn Caption="Location" FieldName="@nameof(OrgDashPageModel.EventPageModel.Location)" />
        <DxGridDataColumn Caption="Hosts" FieldName="@nameof(OrgDashPageModel.EventPageModel.Hosts)" />
        <DxGridDataColumn Caption="Owner" FieldName="@nameof(OrgDashPageModel.EventPageModel.Owner)" />
    </Columns>
    <DetailRowTemplate Context="contextEffort">
        <SignupGrid/>
    </DetailRowTemplate>
</DxGrid>

需要将其封装为可复用组件，同时支持三种使用场景：

• 无详情行的情况
• 使用第一种详情行组件
• 使用第二种详情行组件

期望的简化使用方式如下，组件会自动将内部的<DetailRowTemplate>放置到</Columns>标签之后：

<EffortGrid>
    <DetailRowTemplate Context="contextEffort">
        <SignupGrid/>
    </DetailRowTemplate>
</EffortGrid>

基于@mxmissle方案的实现（含额外处理） #

可复用组件的Razor代码 #

注意其中通过DetailRowDisplayMode="DetailRowMode"动态控制详情行显示逻辑：

<DxGrid Data="@EventList"
        PageSize="5"
        DetailRowDisplayMode="@DetailRowMode"
        CssClass="dx-datagrid">
    <Columns>
        <DxGridDataColumn Caption="Type" FieldName="Type" />
        <DxGridDataColumn Caption="Date" DisplayFormat="g" FieldName="StartDateTime" />
        <DxGridDataColumn Caption="Hosts" FieldName="Hosts" />
        <DxGridDataColumn Caption="Owner" FieldName="Owner" />
    </Columns>
    <DetailRowTemplate Context="contextEffort">
        @ChildContent
    </DetailRowTemplate>
</DxGrid>

组件后台C#代码 #

通过ChildContent参数接收外部传入的详情行模板，并根据其是否为空动态设置详情行的显示模式：

[Parameter]
public RenderFragment? ChildContent { get; set; }

private GridDetailRowDisplayMode DetailRowMode => ChildContent == null
    ? GridDetailRowDisplayMode.Never
    : GridDetailRowDisplayMode.Auto;

内容的提问来源于stack exchange，提问作者David Thielen