Use SfDropDownList inside custom component

[Christopher Brandsdal]

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;
    }
}

 

[UdhayaKumar Duraisamy]

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

https://www.syncfusion.com/forums/169085/validation-of-child-component?reply=SoHuMh