Images and Text in DropDownList in Grid Column

[James]

..I've read all the forum docs, but no help.

Within a ejs-grid I wish to display a column that has country flag as image with  country name. The flag and country name are bound to a foreign key.

The following code works, it displays the flag and country correctly. 

However, when I select the ejs-dropdrown the list presented has the country name, but does not have the country flag. This is expecte. But how do I manipulate the tempalte for the drop down box? I have tried using '#itemTempate' and the various solutions in ejs-dropdown forms. But go

In short. How do i display country flag and country name in the drop down list

//Code works for the grid, but the template for the drop down box just shows country name. I need to manipulate the drop down template somehow. See screenshot, drop down only has country names

    field='countryId' headerText='Country' width=100 foreignKeyField='id' foreignKeyValue='name' [dataSource]='countryData' editType='dropdownedit'[edit]='editparamsCountry' textAlign='Left'>

                             #template let-data>

                                 class="imagedropdown">

                                     src="assets/flags4x3/{{data.foreignKeyData.isoAlpha2}}.svg" height="20">

                                     class="bob"> {{data.foreignKeyData.name}}