Why the grid throw the error ,when I set Columns by Code

[wills]

hi ,

html:

<ejs-grid [dataSource]='pagerService | async' [columns]="columns"></ejs-grid>

Ts：

this.columns = [

            { field: 'LogoImage', foreignKeyValue: 'LogoImage', headerText: this.translate.instant("image"), width: 80, allowResizing: false, textAlign: 'Center',                  allowGrouping: false, allowFiltering: false, template: this.template_image, type: 'image' },

            { field: 'CompanyID', foreignKeyValue: 'CompanyID', headerText: this.translate.instant("code"), width: 160, allowGrouping: false, allowFiltering: false, defualtFiltering: true },

            { field: 'Name1', foreignKeyValue: 'Name1', headerText: this.translate.instant("name1"), width: 200, allowGrouping: false, allowFiltering: false },

            { field: 'Name2', foreignKeyValue: 'Name2', headerText: this.translate.instant("name2"), width: 200, allowGrouping: false, allowFiltering: false },

            { field: 'Name3', foreignKeyValue: 'Name3', headerText: this.translate.instant("name3"), width: 200, allowGrouping: false, allowFiltering: false },

            { field: 'BaseCurrency', foreignKeyValue: 'BaseCurrency', headerText: this.translate.instant("currency"), width: 100, allowGrouping: true, allowFiltering: false },

            { field: 'Reference1', foreignKeyValue: 'Reference1', headerText: this.translate.instant('reference1'), width: 200, allowGrouping: true, allowFiltering: false },

            { field: 'Reference2', foreignKeyValue: 'Reference2', headerText: this.translate.instant('reference2'), width: 200, allowGrouping: true, allowFiltering: false },

        ];

error: 

logger.service.ts:77 TypeError: col.isForeignColumn is not a function

    at ej2-grids.es2015.js:14800

    at Array.filter (<anonymous>)

    at GridComponent.getForeignKeyColumns (ej2-grids.es2015.js:14799)

    at Data.filterQuery (ej2-grids.es2015.js:1114)

    at Data.generateQuery (ej2-grids.es2015.js:946)

    at Render.refreshDataManager (ej2-grids.es2015.js:5243)

    at GridComponent.<anonymous> (ej2-grids.es2015.js:5162)

    at GridComponent.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js:300)

    at Render.refresh (ej2-grids.es2015.js:5099)

    at GridComponent.refresh (ej2-grids.es2015.js:13526)

[Rajapandiyan Settu]

Hi wills, 

Greetings from syncfusion support. 

Query :  TypeError: col.isForeignColumn is not a function 

We are unable to reproduce the reported issue at our end. ForeignKey column in EJ2 Grid is working fine at our end. Find the below sample for your reference. 

Sample: https://stackblitz.com/edit/angular-ws2fqv-8yskwv?file=app.component.ts  

By analyzing your code example, we suspect that you have trying to use foreignKey column in the Grid. When we using foreignKey column we should provide the foreignKeyValue and dataSource to that column. Please refer to the below documentation for more information. 

foreignKeyColumn: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column  

 { 

      field: "EmployeeID", 

      foreignKeyField: "EmployeeID", 

      foreignKeyValue: "LastName", 

      dataSource: employeeData, 

      width: 200, 

      allowGrouping: false    } 

In the above sample, we have used two different dataSource for both Grid and foreignKey column dataSource. The data-mapping between two tables (dataSource) is based on the column field name (EmployeeID) and foreignKeyField name (EmployeeID).  

i.e., foreignKeyField field should contains the EmployeeID field’s value its foreignKey dataSource. Then its correspond ForeignKeyValue (LastName) will be displayed on the Grid. Refer to the below screenshots. 

All the actions are performed with the column field and its correspond foreignKeyValue will be displayed in the Grid. 

If you still face the issue, please share the below details to validate further with this. 

1. Share the full Grid rendering code.
2. Share the package.json file.
3. Video demo of the reported behavior.
4. When you facing this problem? share the replication procedure.
5. If Possible, share the simple issue reproducible sample.

Regards, 

Rajapandiyan S