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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Images and Text in DropDownList in Grid Column

Thread ID:

Created:

Updated:

Platform:

Replies:

149365 Nov 22,2019 10:19 PM UTC Nov 26,2019 06:14 AM UTC Angular - EJ 2 3
loading
Tags: Grid
James
Asked On November 22, 2019 10:28 PM UTC

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

                                
                            
           


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 



James
Replied On 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.





Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon