Adding a Img in a Dropdown Menu?

Question

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();

You can try by using ``, I don't know if it supports HTML. [Radzen examples](https://blazor.radzen.com/dropdown) — T.Trassoudaine, Oct 04 '22 at 09:09
What is your issue? How to get the ISO of the countries, how to select the right flags to display, how to display them or even another issue? — T.Trassoudaine, Oct 04 '22 at 09:28

Dimitris Maragkos · Accepted Answer · 2022-10-04T12:39:48.047

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>

Thank you very much! your select is working perfectly now im struggling to convert it to a radzen dropdown. — Obind_, Oct 04 '22 at 11:22
You have to use `TextProperty` and `ValueProperty` parameters. Added `RadzenDropDown ` example in my answer. — Dimitris Maragkos, Oct 04 '22 at 11:36
do you happen to know how to get the numbers (+49....) after the country flags? — Obind_, Oct 04 '22 at 13:27
Try this: https://pastebin.com/QPTLWsS6. The code can be refactored to become cleaner. — Dimitris Maragkos, Oct 04 '22 at 14:09

Adding a Img in a Dropdown Menu?

1 Answers1