Drop down with images

[Luke_O_Brien]

Hi there,

I have a list of countries with a name and SVG flag data, I would like to display them in a drop down with the name appearing alongside the flag.
Your DropDown control supports templates, but when I add an <img> tag to the template, only it's alt attribute is displayed.

How can I display images in the template?
Do I need to use backgound-image css?

Here is my markup:

<RadzenDropDown Data="@ViewModel.AvailableUiCuture" ValueProperty="Code" TextProperty="LanguageName" @bind-Value="UiCultureCode"
                AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="Select..."
                Style="margin-bottom: 20px; width:400px;">
    <Template>
        @{
                var culture = context as UiCulture;
        }
        <img src="@DataUrl.Svg(culture.SvgFlagData)">
        @culture.LanguageName
    </Template>
</RadzenDropDown>

Thanks

[enchev]

Not sure what's not working for you - you might need to debug the code to see if the src is set. Here is what I've tested:

[Luke_O_Brien]

Hi there,

Thanks, I think it was an issue with me, perhaps with the Data URL.

Anyway, imgs working now and looks very professional:

One thing tho:

1. Clear button on the search.
   In my app I do the translations automaticly by changing the ViewModel, if I search for "German" and then change the selection, the dropdown is empty because non of the options meet the search.

Many thanks,

Luke