Adding a Img in a Dropdown Menu?-CodePudding

I'm programming in blazorframework with Radzen components a webapplication with a registration page. I need from the user the phone number with his country code. To select the country code I have a dropdown menu with the country abbreviations ("DE | US | AC") I would like to have the appropriate flage on the left of it. Is there a way to do this.

Look at my Dropdown Menu

This is the HTML Part of the Dropdown

         <RadzenDropDown Data=@CountryCodes style="width:80px !important; top:9px;"
            AllowFiltering="true"
            FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
            FilterOperator="StringFilterOperator.StartsWith"
            TValue="string"
            Class="w-100"
            @bind-Value=@_value>
         <RadzenDropDown/>

I fill the dropdown with a nuget "libPhonenumbers"

    public HashSet<string> CountryCodes => PhoneNumberUtil.GetInstance().GetSupportedRegions();

CodePudding user response：

Here is a solution using flag emojis. You need a method to convert country codes to flag emojis. You also need to use a font that supports flag emojis e.g. Noto Color Emoji to make the flags appear on windows. In the following example I'm using a simple select element but you can easily modify for RadzenDropDown.

<select @bind="_selectedCountryCode">
    <option disabled>Select country code</option>
    @foreach(var country in Countries)
    {
        <option value="@country.CountryCode">@country.FlagEmoji</option>
    }
</select>

<p>Selected country code: @_selectedCountryCode</p>

@code {
    private string _selectedCountryCode;
    private HashSet<string> CountryCodes = new HashSet<string> { "DE", "US", "AC" };

    private List<Country> Countries => CountryCodes
        .Select(x => new Country
        {
            CountryCode = x,
            FlagEmoji = IsoCountryCodeToFlagEmoji(x)
        })
        .ToList();

    private string IsoCountryCodeToFlagEmoji(string countryCode) =>
        string.Concat(countryCode.ToUpper().Select(x => char.ConvertFromUtf32(x   0x1F1A5)));

    public class Country
    {
        public string CountryCode { get; set; }
        public string FlagEmoji { get; set; }      
    }
}

BlazorFiddle

How to convert country name to flag emoji article

RadzenDropDown example:

<RadzenDropDown Data="@Countries"
                style="width: 80px !important; top: 9px;"
                AllowFiltering="true"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                FilterOperator="StringFilterOperator.StartsWith"
                TValue="string"
                TextProperty="@nameof(Country.FlagEmoji)"
                ValueProperty="@nameof(Country.CountryCode)"
                Class="w-100"
                @bind-Value=@_selectedCountryCode>
</RadzenDropDown>