Detail Row Trigger : Better docs with common cases

[David-Moreira]

Hello everybody,

I'm trying to use the datagrid in my application and want to have a Button that toggles a detailrow. The button image should change from ExpandMore to ExpandLess when the detailrow is displayed and back to ExpandMore when the detailrow is not displayed. Is there any possibility how to achieve this?

Some code:

<DataGrid @ref="dataGrid" TItem="ProcessFlow" Data="processFlows" Responsive Virtualize Editable="false" Filterable Resizable ResizeMode="TableResizeMode.Columns" SelectionMode="DataGridSelectionMode.Multiple" @bind-SelectedRows="selectedProcessFlows" DetailRowStartsVisible="false" ShowPager ShowPageSizes RowSelectable="RowSelectableHandler">
            <DataGridColumns>
                <DataGridMultiSelectColumn />
[...]
<DataGridColumn Caption="@_localizer["Details"]">
                    <DisplayTemplate>
                        <Button Color="Color.Secondary" Size="Size.Small" Clicked="() => OnDetailsButtonClicked(context)"><Icon Name="IconName.ExpandMore" /></Button>
                    </DisplayTemplate>
                </DataGridColumn>
            </DataGridColumns>
            <DetailRowTemplate>
                @{
                    //Select details only when nescearry
                    var dbContext = _dbContextFactory.CreateDbContext();
                    var processFlowWithDetails = dbContext.GetProcessFlowWithReferencesById(context.Id);
                    <Processdetails ProcessFlow="@processFlowWithDetails" />
                }
            </DetailRowTemplate>
        </DataGrid>

async Task OnDetailsButtonClicked(ProcessFlow? processFlow)
    {
        if ((dataGrid != null) && (processFlow != null))
        {
            await dataGrid.ToggleDetailRow(processFlow);
        }
    }

Originally posted by @svenbaus in #4744

[EngincanV]

I would like to see better documentation for the detail row too. I have a similar requirement with @David-Moreira.