my parent grid and child grid have different datasources. I need parent grid values for aggregate function in my child grid. Is it possible to achieve this ?
<ejs-grid
#grid
[dataSource]="voyageArray"
[allowFiltering]="true"
[filterSettings]="filterOption"
(rowSelected)="rowSelected($event)"
(rowDataBound)="rowDataBound($event)"
[allowResizing]="true"
[rowHeight]="25"
enableInfiniteScrolling="true"
height="250px"
(headerCellInfo)="headerCellInfo($event)"
[childGrid]='childGrid'>
<ng-template #toolbarTemplate let-data>
<ejs-toolbar (clicked)='clickHandler($event)'>
<e-items>
<e-item id='addNewItem' tooltipText='Add New Voyage' prefixIcon='e-add'></e-item>
<e-item id='editItem' tooltipText='Edit Voyage' prefixIcon='e-edit'></e-item>
<e-item id='deleteItem' tooltipText='Delete Voyage' prefixIcon='e-delete'></e-item>
<e-item id='january' text='Jan' tooltipText='January'align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='february' text='Feb' tooltipText='February'align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='march' text='Mar' tooltipText='March'align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='april' text='Apr' tooltipText='April' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='may' text='May' tooltipText='May' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='june' text='Jun' tooltipText='June' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='july' text='Jul' tooltipText='july' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='august' text='Aug' tooltipText='August' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='september' text='Sep' tooltipText='September' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='october' text='Oct' tooltipText='October' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='november' text='Nov' tooltipText='November' align='Right'></e-item>
<e-item type='Separator' align='Right'></e-item>
<e-item id='december' text='Dec' tooltipText='December' align='Right'></e-item>
</e-items>
</ejs-toolbar>
</ng-template>
<e-columns>
<e-column field="vessel.name" headerText="Vessel" width="120px"></e-column>
<e-column field="lineCode" headerText="Line" textAlign="Center" width="75px"></e-column>
<e-column field="charterType" headerText="Type" textAlign="Center" width="120px"></e-column>
<e-column field="voyage" headerText="Voy." textAlign="Center" width="75px"></e-column>
<e-column field="cargoM3" headerText="Quantity" textAlign="Right" [valueAccessor]="quantityFormatter" width="90px"></e-column>
<e-column field="blDate" headerText="BL Date" textAlign="Center" width="90px" type='date' [format]="format"></e-column>
<e-column field="callsList.callsList" headerText="Ports" width="100px"></e-column>
<e-column field="vessel.carrier.name" headerText="Owner" width="100px"></e-column>
<e-column field="chargeTotal.balanceEur" headerText="Balance" textAlign="Right" [valueAccessor]="currencyFormatter" width="130px"></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column field="chargeTotal.balanceEur" type="sum">
<ng-template #footerTemplate let-data><b>Bal.: {{data.sum | number:'1.2-2':'es'}} €</b></ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
public childGrid: GridModel = {
dataSource: VoyageOperatorChargeModel,
queryString: "voyageId",
allowResizing: true,
rowHeight: 25,
columns: [
{field:"chargeDesc", headerText:"Charge"},
{field:"invoiceNumber", headerText:"Invoice No.", textAlign: "Right"},
{field:"invoiceDate", headerText:"Inv. Date", textAlign: "Right", type: "date", format:this.format},
{field:"customer.synonim", headerText:"Customer"},
{field:"customerReceiver.synonim", headerText:"Invoice From/To"},
{field:"invoiceAmountDebit", headerText:"Debit", valueAccessor: this.currencyFormatterChild, textAlign: "Right"},
{field:"invoiceAmountCredit", headerText:"Credit", valueAccessor: this.currencyFormatterChild, textAlign: "Right"}
],
// aggregates: [{
// columns: [
// {type:"Custom", customAggregate: this.customAggregateDebitChild, columnName:"invoiceAmountDebit", footerTemplate:"Bal: ${Sum}"},
// {type:"Sum", field:"invoiceAmountCredit", columnName:"invoiceAmountCredit", footerTemplate:"Bal: ${Sum}"}
// ]
// }
// ],
};