Hi.
I'm trying to create a reusable component with a SfDropDownList to select nationality. It has flags and everything, so I like to reuse it on several pages. I have done this with SfTextBox and it passes back the @bind-Value without problem. But I just can't seem to get the same thing to work with the
SfDropDownList. I get the value passed into the custom component without problem, but I\m just not able to pass it back to the parent.
I am not able to fin an example of this for the
SfDropDownList.
Here is the code I have so far. It is almost a copy of the code I use for
SfTextBox so no wonder it does not work hehe.
Parent page:
<NationalityDropDownList @bind-Value="@(model.NationalityId)" Id="NationalityId" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.Nationality)" @bind-Value:event="ValueChanged"></NationalityDropDownList>
NationalityDropDownList.razor:
@using Syncfusion.Blazor.Inputs
@inherits ExtendedComponentBase
<SfDropDownList @ref="Box" ID="@Id" TValue="string" TItem="Nationality" ValueChanged="ValueChanged" DataSource="@_nationalities" Value="@Value" Placeholder="@Localizer.GetString(() => WebLocalizerResources.General.SelectNationalityPlaceholder)">
<DropDownListEvents TItem="Nationality" TValue="string" ValueChange="OnChange"></DropDownListEvents>
<DropDownListTemplates TItem="Nationality">
<ItemTemplate>
<img src="@((context as Nationality).FlagImageUrl)" height="14" class="mr-1" /> @((context as Nationality).Name)
</ItemTemplate>
<ValueTemplate>
@((context as Nationality).Name)
</ValueTemplate>
</DropDownListTemplates>
<DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
</SfDropDownList>
NationalityDropDownList Code Behind:
public partial class NationalityDropDownList : ExtendedComponentBase
{
[Inject] IRepository<Nationality> NationalityService { get; set; }
private string _value;
[Parameter]
public string Value
{
get => _value;
set
{
if (!EqualityComparer<string>.Default.Equals(value, _value))
{
_value = value;
ValueChanged.InvokeAsync(value);
}
}
}
[Parameter]
public EventCallback<string> ValueChanged { get; set; }
private SfDropDownList<string, Nationality> Box { get; set; }
[Parameter]
public string Id { get; set; }
[Parameter]
public string Placeholder { get; set; }
[Parameter]
public bool Readonly { get; set; }
[Parameter] public string NationalityId { get; set; }
private List<Nationality> _nationalities { get; set; } = new();
private string _city { get; set; }
protected override async Task OnInitializedAsync()
{
_nationalities = await NationalityService.ListAsync(CancellationToken.Token);
_nationalities = _nationalities.OrderBy(p => p.Name).ToList();
}
private void OnChange(ChangeEventArgs<string, Nationality> args)
{
Value = args.Value;
}
}
