We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Use SfDropDownList inside custom component


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>


@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">
            <img src="@((context as Nationality).FlagImageUrl)" height="14" class="mr-1" /> @((context as Nationality).Name)

            @((context as Nationality).Name)
    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

NationalityDropDownList Code Behind:

public partial class NationalityDropDownList : ExtendedComponentBase

    [Inject] IRepository<Nationality> NationalityService { get; set; }

    private string _value;
    public string Value
        get => _value;
            if (!EqualityComparer<string>.Default.Equals(value, _value))
                _value = value;

    public EventCallback<string> ValueChanged { get; set; }

    private SfDropDownList<string, Nationality> Box { get; set; }

    public string Id { get; set; }

    public string Placeholder { get; set; }

    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;


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team January 26, 2023 09:42 AM UTC

You can refer to the below shared Syncfusion forum regarding your requirement.


Live Chat Icon For mobile
Up arrow icon