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

Name and Icon in reactive grid column using Foreign Key

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
loading
Tags: Grid
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'
            },
        ];


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] 
<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> 
 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


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
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    


James
Replied On November 12, 2019 08:31 AM UTC

Sorry, HTML pasted terribly. Please find attached html file

Attachment: example_cbd00d97.zip

Pavithra Subramaniyam [Syncfusion]
Replied On 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,  
 
[app.component.ts]  
@Component({  
  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,  
 
https://medium.com/better-programming/expressionchangedafterithasbeencheckederror-in-angular-what-why-and-how-to-fix-it-c6bdc0b22787  
 
https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained 
 
https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror 
 
please get back to us, if you need any further assistance. 
 

Regards,
Pavithra.
 


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