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

Subscribe to this post

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

Reply | Reply with quote

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

}

Sample : https://stackblitz.com/edit/foreignkey-itemtemplate-dropdown?file=app.component.html

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-type-and-its-params

Regards,

Thavasianand S.

Reply | Reply with quote

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.

Reply | Reply with quote

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.

Reply | Reply with quote

Images and Text in DropDownList in Grid Column

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US