I’m working with a view model that contains collections displayed in MudTables. I need to edit complex items in these tables and implement search functionality using MudAutocomplete.
Here’s the issue: I’ve bound the context item of the table to the autocomplete value. However, when I search for an item, the original value doesn’t change. I also can’t clear the autocomplete, and the validation isn’t triggered.
I expect to be able to modify the value in the autocomplete input and change the context element in the associated items in the table.
we have this try mudblazor as example
https://try.mudblazor.com/snippet/cuQyaKkyqKQQUoGG
Here’s a simplified version of my code:
<MudGrid>
<MudItem xs="12">
<MudCard Elevation="0">
<MudCardContent>
<MudForm @ref="_form" Model="@_selectedTeam" Validation="@(_selectedTeamValidator.ValidateValue)" ValidationDelay="0" IsValid="@(_selectedTeamValidator.Validate(_selectedTeam).IsValid)">
<MudStack>
<MudText Typo="Typo.h4" Style="text-transform: uppercase">S&P Team</MudText>
<MudTable Items="@_selectedTeam.TeamMembers" Dense="true" CanCancelEdit="true" HorizontalScrollbar="true" Breakpoint="Breakpoint.None">
<HeaderContent>
<MudTh>Role</MudTh>
<MudTh>Name</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Role">@context.Role</MudTd>
<MudTd DataLabel="Name">@context.DisplayName</MudTd>
</RowTemplate>
<RowEditingTemplate>
<MudTd DataLabel="Role">@context.Role</MudTd>
<MudTd DataLabel="Name">
@if (context.Role == "ResponsibleAdvisor")
{
<MudAutocomplete T="SalesProcessParty"
@bind-Value="@context"
@ref="_responsibleAdvisorAutocomplete"
Validation=@(async () => await _teamMemberValidator.ValidatePropertyValueAsync(context, "PartyId"))
For="@(() => context)"
ToStringFunc="@(x => x?.DisplayName)"
SearchFunc="GetEmployees"
Variant="Variant.Outlined"
Margin="Margin.Dense" />
}
@if (context.Role == "SupportingAdvisor")
{
<MudAutocomplete T="SalesProcessParty"
@bind-Value="@context"
@ref="_supportingAdvisorAutocomplete"
For="@(() => context)"
Immediate="false"
Clearable="true"
ResetValueOnEmptyText="true"
ToStringFunc="@(x => x.DisplayName)"
SearchFunc="GetEmployees"
Variant="Variant.Outlined"
Margin="Margin.Dense" />
}
</MudTd>
</RowEditingTemplate>
</MudTable>
</MudStack>
</MudForm>
</MudCardContent>
</MudCard>
</MudItem>
</MudGrid>
@code {
private bool _processing;
private TeamMemberValidator _teamMemberValidator = new();
private CustomerMemberValidator _customerMemberValidator = new();
private CustomerTeamValidator _selectedTeamValidator = new();
private CustomerTeamViewModel _selectedTeam = new();
private MudForm _form;
protected override void OnInitialized()
{
_selectedTeam = new()
{
TeamMembers = new List<SalesProcessParty>()
{
new(){
PartyId = Guid.NewGuid(),
FirstName = "Lead",
LastName = "Leader",
Role = "ResponsibleAdvisor"
},
new(){
PartyId = Guid.NewGuid(),
FirstName = "Support",
LastName = "Supporter",
Role = "SupportingAdvisor"
}
},
CustomerMembers = new List<SalesProcessParty>()
{
new(){
PartyId = Guid.NewGuid(),
FirstName = "Customer",
LastName = "Contact",
Role = "CustomerContact"
}
}
};
base.OnInitialized();
}
private async Task<IEnumerable<SalesProcessParty>> GetEmployees(string searchText)
{
if (string.IsNullOrEmpty(searchText) || string.IsNullOrWhiteSpace(searchText))
return new List<SalesProcessParty>();
await Task.Delay(2000);
var persons = parties.Where(x => !_selectedTeam.TeamMembers.Select(y => y.PartyId).Contains(x.PartyId) && x.DisplayName.Contains(searchText)) ?? new List<SalesProcessParty>();
return persons;
}
private IList<SalesProcessParty> parties = new List<SalesProcessParty>()
{
new()
{
PartyId = Guid.NewGuid(),
FirstName = "Person",
LastName = "One",
},
new()
{
PartyId = Guid.NewGuid(),
FirstName = "Person",
LastName = "Two",
},
new()
{
PartyId = Guid.NewGuid(),
FirstName = "Person",
LastName = "Three",
},
new()
{
PartyId = Guid.NewGuid(),
FirstName = "Person",
LastName = "Four",
},
new()
{
PartyId = Guid.NewGuid(),
FirstName = "Person",
LastName = "Five",
}
};
}
Diego Cascudo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.