MudSwitch 的 MudBlazor DataGrid 分组

Question

我试图通过切换 MudSwitch 来切换 MudDataGrid 中分组的列。默认情况下，它按实体分组并显示项目计数。我希望能够切换它以按代理机构显示计数。更改切换开关不会执行任何操作。 dataGrid.GroupItems() 不执行任何操作。我已经设置了适当的“隐藏”列，但仅此而已。

我希望能够单击开关并切换列

<MudDataGrid @ref="dataGrid" T="Incident" Items="@incidentList"  Bordered="true"
             FixedHeader="true" Dense="true" SortMode="SortMode.None" Filterable="false" 
             Groupable="true" ShowColumnOptions="false">
    <ToolBarContent>
        <MudText Typo="Typo.h5">Investigative Tracker</MudText>     
        <MudSpacer />
        <MudTextField @bind-Value="_searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true" Class="mb-4 ml-3 pr-5"
                      AdornmentIcon="@Icons.Material.Filled.Search" Style="color: #ffffff;" IconSize="Size.Medium"></MudTextField>
    </ToolBarContent>   
    <Columns>
        <PropertyColumn Property="x => x.AgencyMember.Entity.ToString()" Title="Full Name" Hidden="@groupValue" Grouping="@groupValue" Groupable="true" >
            <GroupTemplate>
                <span style="font-weight: bold;">
                    <MudChip Variant="Variant.Text" Style="background-color: transparent;" Color="Color.Tertiary" Size="Size.Small">
                        <table><td style="width: 250px;">@context.Grouping.Key</td> <td style="width: fit-content;">Count: @context.Grouping.Count()</td></table>
                    </MudChip>
                </span>
            </GroupTemplate>
        </PropertyColumn>
        <PropertyColumn Property="x => x.AgencyMember.Agency.Code" Title="Agency" Hidden="@(!groupValue)" Grouping="@(!groupValue)" Groupable="true">
            <GroupTemplate>
                <span style="font-weight: bold;">
                    <MudChip Variant="Variant.Text" Style="background-color: transparent;" Color="Color.Tertiary" Size="Size.Small">
                        <table><td style="width: 250px;">@context.Grouping.Key</td> <td style="width: fit-content;">Count: @context.Grouping.Count()</td></table>
                    </MudChip>
                </span>
            </GroupTemplate>
        </PropertyColumn>
        <PropertyColumn Property="x => x.AgencyMember.Agency.Description" Title="Description" />
        <PropertyColumn Property="x => x.ReceivedDateTime" Title="Created" />
        <PropertyColumn Property="x => x.LastUpdateTimeStamp" Title="Last Update" />        
    </Columns>
</MudDataGrid>

我的@代码块

@code {
    private string _searchString = string.Empty;
    private List<Incident> incidentList = [];
    private MudDataGrid<Incident> dataGrid = default!;
    private MudSwitch<bool> groupBySwitch = default!; 
    private bool groupValue = true;

    protected async override Task OnInitializedAsync()
    {
        incidentList = await _trackerRepo.GetIncidentsAsync();
        groupBySwitch.Value = true;
    }

    // Toggle Group By
    private async Task GroupByChanged(bool isChecked)
    {
        if (isChecked)
        {
            groupValue = true;
        }
        else
        {
            groupValue = false;
        }
        dataGrid.GroupItems();
    }

    // happens everytime a row is edited, added
    private async Task CommittedItemChanges(Incident item)
    {

    }

    // quick filter - filter globally across multiple columns with the same input
    private Func<Incident, bool> _quickFilter => x =>
    {
        if (string.IsNullOrWhiteSpace(_searchString))
            return true;

        return false;
    };
}

Answer 1

我忘记了我在另一个数据网格中做了类似的事情，我想在其中停止以编程方式分组。答案是通过 if 语句将我的分组语句包装在数据网格中。因此，创建一个布尔值来确定它是否以一种方式或另一种方式分组。 然后在数据网格列区域内（如果包含组值）并添加两个属性列，然后根据组值隐藏。

<MudDataGrid options...>
<Columns>
@if (groupValue)
{
  <PropertyColumn Property="x => x.AgencyMember.Entity" Title="Employee" Hidden="true" Grouping="True" GroupBy="x => x.AgencyMember.Entity" />
}
else
{
  <PropertyColumn Property="x => x.AgencyMember.Agency" Title="Agency" Hidden="true" Grouping="True" GroupBy="x => x.AgencyMember.Agency" />
}
<PropertyColumn Property="x => x.AgencyMember.Entity" Title="Employee" Hidden="@(!groupValue)" />
<PropertyColumn Property="x => x.AgencyMember.Agency" Title="Agency" Hidden="@(groupValue)" />
</Columns>
</MudDataGrid>