MudBlazor DataGrid通过MudSwitch切换分组列无效问题求助

问题根源 #

你当前的代码错误使用了GroupItems()方法——这个方法用于对选中行进行分组操作，而非设置DataGrid的分组列。同时仅通过Grouping属性标记列是否可分组，不会自动触发DataGrid更新分组状态。

修复步骤及代码修改 #

1. 添加MudSwitch到工具栏

在ToolBarContent中补充开关控件（你之前的代码遗漏了这部分Razor代码）：

<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>
        <!-- 添加分组切换开关 -->
        <MudSwitch @bind-Value="groupValue" Label="按机构分组" OnChange="GroupByChanged" Class="ml-2" />
    </ToolBarContent>   
    <Columns>
        <PropertyColumn Property="x => x.AgencyMember.Entity.ToString()" Title="Full Name" Hidden="@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)" 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>

2. 修改分组切换逻辑

更新@code块中的GroupByChanged方法，直接操作GroupingDefinitions集合切换分组列，并触发DataGrid更新：

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

    protected async override Task OnInitializedAsync()
    {
        incidentList = await _trackerRepo.GetIncidentsAsync();
        // 设置初始分组：按Entity
        dataGrid.GroupingDefinitions.Add(new GroupingDefinition<Incident>
        {
            Selector = x => x.AgencyMember.Entity.ToString(),
            SortDirection = SortDirection.Ascending
        });
    }

    // 切换分组列逻辑
    private void GroupByChanged(bool isChecked)
    {
        // 清空现有分组定义
        dataGrid.GroupingDefinitions.Clear();
        
        if (isChecked)
        {
            // 切换为按Agency分组
            dataGrid.GroupingDefinitions.Add(new GroupingDefinition<Incident>
            {
                Selector = x => x.AgencyMember.Agency.Code,
                SortDirection = SortDirection.Ascending
            });
        }
        else
        {
            // 切换回按Entity分组
            dataGrid.GroupingDefinitions.Add(new GroupingDefinition<Incident>
            {
                Selector = x => x.AgencyMember.Entity.ToString(),
                SortDirection = SortDirection.Ascending
            });
        }
        
        // 触发DataGrid重新加载数据并更新分组
        dataGrid.ReloadServerData();
    }

    private async Task CommittedItemChanges(Incident item)
    {
        // 保留原有逻辑
    }

    private Func<Incident, bool> _quickFilter = x =>
    {
        if (string.IsNullOrWhiteSpace(_searchString))
            return true;
        // 补充搜索逻辑，避免默认过滤所有数据
        return x.AgencyMember.Entity.ToString().Contains(_searchString, StringComparison.OrdinalIgnoreCase) ||
               x.AgencyMember.Agency.Code.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ||
               x.AgencyMember.Agency.Description.Contains(_searchString, StringComparison.OrdinalIgnoreCase);
    };
}

关键说明 #

• GroupingDefinitions是MudDataGrid存储分组规则的核心集合，直接修改它才能实现动态分组列切换。
• ReloadServerData()用于通知DataGrid重新计算分组并更新UI。
• 移除了无用的groupBySwitch引用，直接通过@bind-Value绑定groupValue即可。
• 补充了_quickFilter的搜索逻辑（原代码返回false会导致所有数据被过滤）。

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