I'm trying to toggle the column that is grouped in my MudDataGrid by toggling the MudSwitch. By default it is grouped by Entity and a count of items is shown. I want to be able to toggle it to show the count by Agency. Changing the toggle doesn't do anything. dataGrid.GroupItems() doesn't do anything. The "hidden" columns I have set toggle appropriately, but that's it.
I would like to be able to click the switch and toggle columns
<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>
My @Code block
@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;
};
}
I had forgotten I did something similar in another Data Grid where I wanted to stop grouping programmatically. The answer was to wrap my grouping statement in the datagrid by an if statement. So create a boolean value that determines if it's grouped one way or the other. then inside the datagrid Columns area if with the group value and add two property columns after that you hide depend on group value.
<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>