Country and Flags in Combobox

[Naveen Davuluri]

Hi, I have a list of countries displayed in the combo box and associated flags with it. Is there a way to display the flags?

[Kokila Poovendran]

Hi Naveen Davuluri

Greetings from Syncfusion Support!


Thank you for reaching out to us with your query about displaying country flags in a ComboBox. We have prepared a sample based on your requirement.Please find the attached sample code below:

<ejs-combobox id="employees" dataSource="@data" placeholder="Select a country" popupHeight="270px"

              headerTemplate="@Html.Raw("<div class=\"header\"> <span>Flag</span> <span class=\"info\" style='padding-left:5px'>Country</span></div>")"

              itemTemplate="@Html.Raw("<div style='padding:10px'><img class=\"empImage\" src=\"${Flag}\" alt=\"employee\"/><div class=\"ename\"> ${Name} </div></div>")">

    <e-combobox-fields text="Name"></e-combobox-fields>

</ejs-combobox>

In the above code snippet, we have customized the ComboBox to display countries with their respective flags using the "itemTemplate" property.

For more details, please refer to the following links:  

Demo: https://ej2.syncfusion.com/aspnetcore/combobox/template#/material3

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/combo-box/templates#item-template

If you have any further questions or need additional assistance, please feel free to reach out.

[Naveen Davuluri]

Hi, by any chance, could you point me to a demo where this so that i can look at the source/data source?

[Kokila Poovendran]

Hi Naveen Davuluri,

Sorry for the inconvenience caused. Please find the sample in the attachment below. If you encounter any issues, please let us know.

Attachment: ASPCoreSamples_3995bb97.zip