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

Name and Icon in reactive grid column using Foreign Key

One day on this... no luck

Sir, could you show me how to bind a grid column containing a foreign key to a name and an image url in a *reactive* form

I understand that I can bind a foreign key using the ForeignKeyService using

<e-column field='countryId' headerText='Country' foreignKeyField='id' foreignKeyValue='countryName' [dataSource]='countryData'  [edit]='editparams' >

The above caused the country name to be shown in the grid correctly and not the countryId

However, I want to display a flag icon of the country alongside the country name.

The column template would look something like this, but I can't bind the name and url

<ng-template #itemTemplate let-data>
<div class="imagedropdown">
<img src="{{data.countryIconUrl}}" height="20">
<span class="bob"> {{data.countryName}}</span>

Data structures

export class gridData
    public id:number;
    public name:string;
    public countryId:number;
export class country

        let griddata:gridData[] = [

let countries:country[] = [

4 Replies

PS Pavithra Subramaniyam Syncfusion Team November 12, 2019 05:50 AM UTC

Hi James, 
Greetings from Syncfusion. 
You can get the foreign key record inside the columns template by using the “foreignKeyData” from the data object as given below. Please refer to the below code example and sample link for more information. 
<div class="control-section" style="height: 600px"> 
  <ejs-grid #grid [dataSource]='griddata'> 
      <e-column field='id' headerText='Order ID' width='120' isPrimaryKey='true' textAlign='Right'></e-column> 
      <e-column field='countryId' headerText='Country' foreignKeyField='id' foreignKeyValue='countryName' 
        <ng-template #template let-data> 
          <div class="imagedropdown"> 
             // foreignkey data 
             // normal Data 
            <span class="bob"> {{data.name}}</span> 
Please get back to us if you need any further assistance on this. 
Pavithra S. 

JA James November 12, 2019 08:23 AM UTC

Thats great. Thankyou. 

There is one more related problem - getting the same to work in the reactive form when the form is edited 

Following your example in setting up reactive forms https://ej2.syncfusion.com/angular/documentation/grid/edit/#reactive-forms , I have attempted to get country flag icon and country name in the dropdownlist as below.  (whole file pasted including your fixed area)

However, I constantly receive the error message '
"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'src: undefined'. 
 Current value: 'src: assets/flags4x3/ar.svg'. It seems like the view has been created after its parent and its children have been dirty checked. 
 Has it been created in a change detection hook ?"

All data is obtained from the API during the constructor with async await, I am not performing any data manipulation in the lifecycle hooks (ngOnInit or AfterViewInit)

If I use the same solution in a dropdownlist in a form (not a grid) then it all works fine.

Any ideas?

 class="container-fluid" id="spinnerTargetElement">
         *ngIf="(isLoaded$ | async) as boolean">
             class="col-sm-12 ">
                 #sfGrid [dataSource]='gridData' [allowPaging]='allowPaging' [allowSorting]="allowSorting"
                    [allowGrouping]="allowGrouping" [allowFiltering]='allowFiltering' [toolbar]='toolbar'
                    [allowExcelExport]='allowExcelExport' [editSettings]='editSettings'
                    (created)="onGridCreated(sfGrid)" (actionBegin)='actionBegin($event)'
                         field='countryId' headerText='Country' width=100 foreignKeyField='id'
                            foreignKeyValue='name' [dataSource]='countryData' editType='dropdownedit'
                            [edit]='editparams' textAlign='Left'>
                             #template let-data>
                                     src="{{data.foreignKeyData.countryIconUrl}}" height="20">
                                     class="bob"> {{data.foreignKeyData.countryName}}

                     #editSettingsTemplate let-data>
                             #myTable class="e-table e-inline-edit" cellspacing="0.25">
                                     style="width: 120px;"> 
                                         style="text-align: right" class='e-rowcell'>
                                             id="countryId" name="countryId"
                                                formControlName="countryId" [dataSource]='countryData' [fields]='fields'
                                                popupHeight='300px' floatLabelType='Never' style="text-align: right">
//problem begins here
                                                 #itemTemplate let-data>
                                                         src="{{data.countryIconUrl}}" height="20">
                                                         class="bob"> {{data.countryName}}

                                                 #valueTemplate let-countryData>
                                                         src="{{data.countryIconUrl}}" height="20">
                                                         class="bob"> {{data.countryName}}
//problem ends here

JA James November 12, 2019 08:31 AM UTC

Sorry, HTML pasted terribly. Please find attached html file

Attachment: example_cbd00d97.zip

PS Pavithra Subramaniyam Syncfusion Team November 13, 2019 01:05 PM UTC

Hi James, 
The cause of the issue is due to manipulating the DOM directly. Angular will not detect these changes and react properly always. To get rid of the issue, we suggest to use angular changeDetectionStrategy can be specified in a component decorator to OnPush. Please refer to the below code,  
  changeDetection: ChangeDetectionStrategy.OnPush,  
  selector: 'app-root',  
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css'],  
 . ..  
To know more about the issue please refer to the below link,  
please get back to us, if you need any further assistance. 


SIGN IN To post a reply.
Live Chat Icon For mobile
Up arrow icon