feat: add RowDetailTemplate to/in DataGrid to implement the master/detail pattern

[joriverm]

🙋 Feature Request

In a lot of UI libraries the data grid have possibilities to expand the row, to show more details of the item that the data grid row is linked to. it is often called the master/detail pattern, and for example it can be found in a few material design :

• MUI : https://mui.com/x/react-data-grid/master-detail/
• MudBlazor : https://mudblazor.com/components/datagrid#row-detail-view
• Telerik : https://www.telerik.com/kendo-react-ui/components/grid/rows/detail/

in (blazor) fluent-ui this is missing, and to have them you have to make the table completely yourself. you can not add or change a part of the table to add the row details (and extra column) when needed.

🤔 Expected Behavior

Table to show a icon that opens/renders or closes the row detail when clicked, which's template is passed down to the datagrid.
kind of like in the mudblazor example

😯 Current Behavior

Not implemented a.t.m.

💁 Possible Solution

I have been thinking about this, and was thinking of adding a RenderFragment , called RowDetailTemplate, to the FluentDataGrid, which is then rendered as an extra row if its detail is set to be opened.
FluentDataGrid.RenderColumnHeaders could check RowDetailTemplate to see if it needs to add an additional column at the start.
FluentDataGrid.RenderRow would then also check & render RowDetailTemplate.

we (my client and me) are willing to implement this ourselves, and make a PR if this is proffered :)

🔦 Context

We are using a datagrid to display some information, but this is just some condensed version with the basics.
The row would be expanded to show or edit the information in details
in this case the info is patient allergy, which the row shows the most important data ( substance, icons to show how it would manifest in the patient etc). the details show all the medical details like the codes, categories, who reported it, how it was tested etc etc

💻 Examples

• MUI : https://mui.com/x/react-data-grid/master-detail/
• MudBlazor : https://mudblazor.com/components/datagrid#row-detail-view
• Telerik : https://www.telerik.com/kendo-react-ui/components/grid/rows/detail/

[vnbaaij]

Because we are using the datagrid web components for rendering the grid and because of using Virtualization is an option (where all items (rows in this case) need to have the same height), I believe it won't be desirable (and perhaps even impossible) to display the details inside of the grid, so that is not something we would develop ourselves or merge in from a PR.

However, the .NET Aspire team has come up with a solution for this with building a SummaryDetails component that combines a FluentDataGrid with a custom details view inside a FluentSplitter.
In a simplified form, it looks like this in code:

<div class="summary-details-container">
    <FluentSplitter Orientation="@Orientation" Collapsed="@(!_internalShowDetails)" OnResized="HandleSplitterResize"
                    Panel1Size="@_panel1Size" Panel2Size="@_panel2Size" Panel1MinSize="150px" Panel2MinSize="150px"
                    BarSize="5" @ref="_splitterRef">
        <Panel1>
            <div class="summary-container">
                @Summary
            </div>
        </Panel1>
        <Panel2>
            <div class="details-container">
                <header>
                :
               :
                </header>
                @Details
            </div>
        </Panel2>
    </FluentSplitter>
</div>

Both Summary and Details are of type Renderfragment? where summary then corresponds to a FluentDataGrid and details is a component that displays additional info from a selected row (by clicking a button in the row) in the grid. Code looks like this, again in simplified form:

<SummaryDetailsView DetailsTitle="@(SelectedResource != null ? $"{SelectedResource.ResourceType}: {GetResourceName(SelectedResource)}" : null)"
                    ShowDetails="@(SelectedResource is not null)"
                    OnDismiss="() => ClearSelectedResource()"
                    SelectedValue="@SelectedResource"
                    ViewKey="ResourcesList">
    <Summary>
        @{
            var gridTemplateColumns = HasResourcesWithCommands ? "1fr 2fr 1.25fr 1.5fr 2.5fr 2fr 1fr 1fr 1fr" : "1fr 2fr 1.25fr 1.5fr 2.5fr 2fr 1fr 1fr";
        }
        <FluentDataGrid Items="@FilteredResources" ResizableColumns="true" GridTemplateColumns="@gridTemplateColumns" RowClass="GetRowClass" Loading="_isLoading">
            <ChildContent>
                  :
                  <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesDetailsColumnHeader)]" Sortable="false" Class="no-ellipsis">
                    <FluentButton Appearance="Appearance.Lightweight"  OnClick="() => ShowResourceDetails(context)">
                       Details...
                     </FluentButton>
                </TemplateColumn>
            </ChildContent>
            <EmptyContent>
                <FluentIcon Icon="Icons.Regular.Size24.AppGeneric" />&nbsp;@Loc[nameof(Dashboard.Resources.Resources.ResourcesNoResources)]
            </EmptyContent>
        </FluentDataGrid>
    </Summary>
    <Details>
        <ResourceDetails Resource="SelectedResource" ShowSpecOnlyToggle="true" />
    </Details>
</SummaryDetailsView>

We can try to 'productize' that component in the library?

[vnbaaij]

Here is an example from Aspire Dashboard from the 'Resources' app part. The row for wich the details are being looked at is highlighted. In the bottom halfyou can see the details. In this case I filtered this view. The details view aso features some other functionality like 'View logs' but those are part of this specific details view implementation.

The user can also choose to have a vertical split summary/details view by clicking the icon in top right of the details (left of close details view icon):

The details view in this implementation usesan accordion to group the information. Agian, that is an implementation detail of this details view.

Because ofthis using a splitter, the user can resize top/bottom or left/right panels.

Thoughts? Comments?

[joriverm]

Hey @vnbaaij,

thanks for the quick response. i must admit i did not think of virtualization and the limitations of using it. That makes it a bit more complex and hard...
hm.
we have made the exact same thing you are suggesting when we made a few mockups for the functional team to go over and decide what they wanted

however, our problem here is that space is limited, and the detail would be underneath the grid, and the grid list is variable in the amount of items which is why we were looking at either expandable cards underneath each other, or a grid with expandable rows.

the space the arrow is pointing to is the space the component would get. this is a blazor component hosted inside WPF btw

as for this master/detail view, i think it will be used in some projects, like in aspire as you mentioned. i have used the view/pattern in previous projects as well as it is a very good view for a list and its details.

im not sure how much more benefit you get from making the component over using the fluentsplitter manually. maybe to be added in the incubationlab? see what the response is?

the master/detail view pattern itself is one i can see us use in the future though!

[joriverm]

oh,
i just looked more closely at your SummaryDetailView component usage, and it most certainly has more than just the splitter.
yes, i do think it would be beneficial to have this in the library, specially if it would be used in aspire as well!

[avojacek]

@vnbaaij Thank you for Aspire example. I did not know that they use Fluent Blazor. It is really great source for learn how to use it. Thank you a lot.

[ldsenow]

If the virtualization is the blocker to this feature, I would personally choose having this common UI feature and must disable virtualization at the same time. It is a constraint rather not having the feature.

[vnbaaij]

@ldsenow that is not an option. Then we would need to say somethng like: "you can use the RowDetail parameter only when you have less then 'x' rows otherwise performance will degrade/app will use a huge amount of memory/etc...

With the Aspire solution we can have both. Can you explain what would be your issue with that approach (besides the size constraints mentioned by @joriverm)?