Display foreign key values in TreeGrid in Angular TreeGrid component

27 Aug 20256 minutes to read

The TreeGrid component uses a hierarchical data binding approach and does not provide built-in support for foreign key data sources.

To display foreign key values during initial rendering, utilize the queryCellInfo event of the TreeGrid component. Additionally, by using the editType and columns.edit properties of the TreeGrid Column, it is possible to render a DropDownList with an external or foreign data source.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { foreignKeyData, dropData } from './datasource';
import { TreeGridComponent,EditService, ToolbarService, ITreeData, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import {  QueryCellInfoEventArgs, Column, IEditCell } from '@syncfusion/ej2-angular-grids';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    providers: [ToolbarService, EditService],
    template: `<ejs-treegrid #treegridObj [dataSource]='data' childMapping='Children'  [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar' (queryCellInfo)='queryCellInfo($event)' [height]='273' >
        <e-columns>
            <e-column field='EmpID' headerText='EmpID' width='70' textAlign='Right' isPrimaryKey='true' ></e-column>
            <e-column field='Name' headerText='Employee Name' width='70' ></e-column>
            <e-column field='Contact' headerText='Contact' width='90' textAlign='Right'></e-column>
            <e-column field='DOB' headerText='DOB' textAlign='Right' [format]='formatOptions' editType= 'datepickeredit' width='70'></e-column>
            <e-column field='EmployeeID' headerText='Employee ID' editType= 'dropdownedit' [edit]='employeeParams'  width='70'></e-column>
            <e-column field='Country' headerText='Country' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public employeeParams?: IEditCell;

    ngOnInit(): void {
        this.data = foreignKeyData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        // Bind ForeignKey DataSource for dropdown using editParams
         this.employeeParams = {
          params: {
                dataSource: new DataManager(dropData),
                fields: { text: "EmployeeName", value: "EmployeeID" },
                query: new Query()
            }  
         };
    }
    queryCellInfo(args: QueryCellInfoEventArgs | any) {
        if ((args.column as Column).field === "EmployeeID") {
            for (var i = 0; i < dropData.length; i++) {
                let data: Object[] = args.data as Object[];
                if (data[(args.column).field] === (dropData as any)[i]["EmployeeID"]) {
                    (args.cell as HTMLElement).innerText = (dropData as any)[i]["EmployeeName"]; // assign the foreignkey field value to the innertext
                }
            }
        }
    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For feature highlights and additional guidance, see the Angular TreeGrid feature tour page. More comprehensive demonstrations for data presentation and manipulation are available in the Angular TreeGrid example.