We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. Images and Text in DropDownList in Grid Column

Images and Text in DropDownList in Grid Column

..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}}
                                
                            
                        

                                
                            
           


3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team November 25, 2019 01:34 PM UTC

Hi James, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suggest you to use the below way to achieve your requirement. Here, we have send additional (itemTemplate) property to dropdown using edit params property of grid. 

Please refer the below code example and sample for more information. 

<ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings" [allowFiltering]='true' 
    [filterSettings]="filterSettings" [editSettings]='editOptions' [toolbar]='toolbarItems' [allowSorting]='true'> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [validationRules]='orderidrules' 
            isPrimaryKey='true'></e-column> 
        <e-column field='CustomerID' headerText='Customer Name' width='250' foreignKeyValue='ContactName' 
            foreignKeyField='CustomerID' [edit]='dpParams' editType='dropdownedit' [dataSource]='customerData'></e-column> 
    </e-columns> 
</ejs-grid> 


export class AppComponent { 
  public ngOnInit(): void { 
      . . . . . 
      this.dpParams = { params:{ 
    // you can customize the template based on your requirement  
    itemTemplate: '<div><img class="empImage" src="https://ej2.syncfusion.com/demos/src/grid/images/1.png" alt="employee"/>' + '<div class="ename"> ${ContactName} </div></div>'}} 
  } 
} 




Regards, 
Thavasianand S. 



JA James November 25, 2019 08:42 PM UTC

Thankyou.

Can I suggest you add a new 'How To'  entry in your documentation "How to display image and text in drop down using foreign key"

Also, as Typescript matures, Syncfusion needs to move beyond defining all its variables as 'any' or 'object' and start using proper class types. The use of 'any' and 'object' is a legacy JavaScript paradigm and should be avoided

For example you define 

public dpParams: any;


But really it is of type IEditCell.

When you use the property type, it makes is much easier to understand the code, intellisence provides added info, the compiler can
create more warnings and errors and I can more easily find IEditCell in your documentation.





PS Pavithra Subramaniyam Syncfusion Team November 26, 2019 06:14 AM UTC

Hi James, 
 
Thanks for your suggestion. 
 
We have created a documentation report for adding a “How To” section for rendering the templates in DropDownList editor component and this will be included in any of our upcoming release. We will also ensure to add proper type class and will add the information of IEditCell in documentation. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon