Name and Icon in reactive grid column using Foreign Key

James

Asked On November 12, 2019 02:03 AM UTC

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'
            },
        ];

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

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

[component.html]

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

// foreignkey data

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

// normal Data

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

Reply | Reply with quote

James

Replied On 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">
    
     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}}

//problem ends here

Thread ID:	Created:	Updated:	Platform:	Replies:
149007	Nov 12,2019 02:03 AM UTC	Nov 13,2019 01:05 PM UTC	Angular - EJ 2	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US