Complex column as foreign key column in Angular Grid component
6 Sep 20223 minutes to read
The following example shows how to set the complex column as foreign key column.
In the following example, Employee.EmployeeID is a complex column and also declared as a foreign column which shows FirstName column from foreign data.
import { Component, OnInit } from '@angular/core';
import { data, employeeData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [height]='315'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='Employee.EmployeeID' headerText='Employee Name'
width=120 foreignKeyValue='FirstName' foreignKeyField='EmployeeID' [dataSource]='employeeData'></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public employeeData: object[];
ngOnInit(): void {
this.data = data.slice(0, 5);
this.employeeData = employeeData.slice(0, 5);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ForeignKeyService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ForeignKeyService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);