Search results

Complex Data Binding in Angular Grid component

08 Dec 2022 / 2 minutes to read

You can achieve complex data binding in the grid by using the dot(.) operator in the column.field.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { complexData } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315'>
                    <e-columns>
                        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
                        <e-column field='Name.FirstName' headerText='First Name' width=120></e-column>
                        <e-column field='Name.LastName' headerText='Last Name' width=120></e-column>
                        <e-column field='Title' headerText='Title' width=150></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];

    ngOnInit(): void {
        this.data = complexData;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

For OData and ODataV4 adaptors, you need to add expand query to the query property (of Grid), to eager load the complex data.

Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
import { employeeData } from './datasource';

@Component({
   selector: 'app-root',
   template: `<ejs-grid #grid [dataSource]='data' allowPaging='true' [query]='query' [height]='315'>
                   <e-columns>
                       <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                       <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                       <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
                       <e-column field='Employee.City' headerText='City' width=130  ></e-column>
                   </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {
   public employeeData: object[];
   public data: DataManager = new DataManager({
       adaptor: new ODataAdaptor(),
       crossDomain: true,
       url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders'
     });
     public query = new Query().expand('Employee');

   ngOnInit(): void {
       this.employeeData = employeeData;
   }
}