I have two problems with the grid.
Firstly, Email and Roles properties of the UserDto
objects are not editable within the DataGrid. Despite following the MudBlazor documentation closely, I cannot find a way to enable editing for these properties.
Docs: https://www.mudblazor.com/components/datagrid#editing (section: Editing)
Secondly, the Email property is being displayed incorrectly within the DataGrid, showing up as System.Collections.Generic.List
1[System.String]` instead of the actual email address.
Here’s a simplified version of my code:
@page "/admin/user/list"
@attribute [Authorize(Roles = "Admin")]
@using System.Net.Http.Json
@using DogObedience.Shared
@using DogObedience.Shared.Admin.User
@inject NavigationManager navigationManager
@inject IHttpClientFactory HttpClientFactory
<MudDataGrid
T="UserDto"
Items="@users"
[email protected]
CommittedItemChanges="@CommittedItemChanges"
Bordered="true"
Dense="true"
[email protected]>
<Columns>
<PropertyColumn Property="u => u.UserName" Title="Navn" Editable="false" />
<PropertyColumn Property="u => u.Email" Title="Email" />
<PropertyColumn Property="u => u.Roles" >
<EditTemplate>
<MudSelect @bind-Value="@context.Item.Roles" Required RequiredError="You must select a Role" Margin="@Margin.Dense" >
@foreach (var role in identityRoles)
{
<MudSelectItem Value="@role">@role</MudSelectItem>
}
</MudSelect>
</EditTemplate>
</PropertyColumn>
</Columns>
</MudDataGrid>
@code {
private List<UserDto> users = [
new UserDto {
Id = "1",
UserName = "JohnDoe",
Email = "[email protected]",
Roles = new List<string> { "Admin", "Judge" } },
new UserDto {
Id = "2",
UserName = "JaneDoe",
Email = "[email protected]",
Roles = new List<string> { "DogHandler" } } ];
private List<string> identityRoles = ["Admin", "Judge", "DogHandler"]; // Hardcoded roles
private HttpClient httpClient;
protected override void OnInitialized()
{
httpClient = HttpClientFactory.CreateClient("Auth");
}
// events
async Task CommittedItemChanges(UserDto user)
{
user.Roles = user.Roles.ToList();
}
}```
What did I try:
Hardcoded the values in case I got the wrong values back from my API or in the wrong format.
I have looked at https://mudblazor.com/components/select#variants to see if I could learn something about the select component that maybe was missing from the MudDataGrid example.
What I was expecting:
Editable cells by setting EditMode to @DataGridEditMode.Cell.
I thought that the Email and Roles properties would become editable directly within the DataGrid by clicking on them and the email cell to be a select/dropdown.
I expected the Email property to display the actual email address.