<ejs-grid #grid [dataSource]='parentData' (created)="created($event)" [childGrid]='childGrid' ...>
...
</ejs-grid>
created(args: any) {
this.childGrid.dataSource = ...; //Here you can provide the child Grids data from the previously fetched data from web api
}
|
load(args){
(this as any).dataSource = [(this as any).parentDetails.parentRowData]; //in your case this.parentDetails.parentRowData['contacts']
}
|
[default.html]
<div class="control-section">
<ejs-grid #grid [dataSource]='data' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' [allowResizing]="true">
. . . .
</ejs-grid>
</div>
[default.component.ts]
loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files
setCulture('es'); // Change the Grid culture
setCurrencyCode('EUR'); // Change the currency code
let localData: string = JSON.stringify([{"OrderID":10248,"CustomerID":"VINET","EmployeeID":5,"OrderDate":"1996-07-04T00:00:00Z","RequiredDate":"1996-08-01T00:00:00Z","ShippedDate":"1996-07-16T00:00:00Z","ShipVia":3,"Freight":3500.10,"ShipName":"Vins et alcools Chevalier","ShipAddress":"59 rue de l'Abbaye","ShipCity":"Reims","ShipRegion":null,"ShipPostalCode":"51100","ShipCountry":"France"}
. . . .
])
// Parse the Json string values
let parseDataSource: Object[] = JSON.parse(localData, (field: any, value: any) => {
let dupValue: any = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
let arr: any = dupValue.split(/[^0-9]/);
let arg: any = parseInt(arr[4], 10);
let arg1: any = parseInt(arr[5], 10);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), arg, arg1);
}
return value;
});
ngOnInit(): void {
this.data = parseDataSource; // Bind the parsed JSON value in EJ2 Grid
this.filterSettings = { type: 'Excel' };
}
|