Name and Icon in reactive grid column using Foreign Key

[James]

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>

</div>

</ng-template>

Data structures

export class gridData

{

    public id:number;

    public name:string;

    public countryId:number;

}

export class country

{

    id:number;

    countryName:string;

    countryIconUrl:string;

}

        let griddata:gridData[] = [

            {

                id:1,name:'Matthew',countryId:1

            },

            {

                id:2,name:'Sandra',countryId:2

            },

            {

                id:1,name:'John',countryId:3

            },

        ];

let countries:country[] = [

            {

                id:1,countryName:'India',countryIconUrl:'assets/countries/India.svg'

            },

            {

                id:2,countryName:'Australia',countryIconUrl:'assets/countries/Australia.svg'

            },

            {

                id:1,countryName:'Peru',countryIconUrl:'assets/countries/Peru.svg'

            },

        ];

[Pavithra Subramaniyam]

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. 

 

[component.html] 

<div class="control-section" style="height: 600px"> 

  <ejs-grid #grid [dataSource]='griddata'> 

    <e-columns> 

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

        [dataSource]='countries'> 

        <ng-template #template let-data> 

          <div class="imagedropdown"> 

             // foreignkey data 

            <span>"{{data.foreignKeyData.countryIconUrl}}"</span><br> 

             // normal Data 

            <span class="bob"> {{data.name}}</span> 

          </div> 

        </ng-template> 

      </e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

 

 

Sample               : https://stackblitz.com/edit/angular-5zrqsw-tudx14-column-template-foreignkey-ml1w2a?file=app.component.html 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[James]

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

    

     class="row">

         *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)'

                    (actionComplete)='actionComplete($event)'>

                    

                    

                         field='countryId' headerText='Country' width=100 foreignKeyField='id'

                            foreignKeyValue='name' [dataSource]='countryData' editType='dropdownedit'

                            [edit]='editparams' textAlign='Left'>

                             #template let-data>

                                 class="imagedropdown">

                                     src="{{data.foreignKeyData.countryIconUrl}}" height="20">

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

                                

                            

                        

                    

                     #editSettingsTemplate let-data>

                         [formGroup]="editFormGroup">

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

                                                     class="imagedropdown">

                                                         src="{{data.countryIconUrl}}" height="20">

                                                         class="bob"> {{data.countryName}}

                                                    

                                                

                                                 #valueTemplate let-countryData>

                                                     class="imageselected">

                                                         src="{{data.countryIconUrl}}" height="20">

                                                         class="bob"> {{data.countryName}}