1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid control with custom aggregates issue

Grid control with custom aggregates issue

Hi,

I need help. I have this grid:


<HTML>
<ejs-grid #grid [dataSource]='productData' [editSettings]='editSettings' [toolbar]='toolbar' height="150px"  (actionComplete)="calculateTotalAmount()">
                                                        <e-columns>
                                                            <e-column field='productCode' headerText='Code' width='200' [validationRules]='textrules' isPrimaryKey='true'></e-column>
                                                            <e-column field='productDisplay' headerText='Name' width='200' [validationRules]='textrules'></e-column>
                                                            <e-column field='productQuantity' headerText='Quantity' width='200' editType='numericedit' [validationRules]='numrules'></e-column>
                                                            <e-column field='productWeight' headerText='Weight per Unit' width='200' editType='numericedit' [validationRules]='numrules'></e-column>
                                                            <e-column field='productWeightUnit' headerText='Weight Unit' width='200' [validationRules]='textrules' editType='dropdownedit' [edit]='weightParams'></e-column>
                                                            <e-column field='productPrice' headerText='Price per Unit' width='200' editType='numericedit' [validationRules]='numrules'></e-column>
                                                            <e-column field='productType' headerText='Type' width='200' [validationRules]='textrules'></e-column>
                                                            <e-column field='productLine' headerText='Condition at Shipping' width='200' [edit]='lineParams' [validationRules]='textrules' editType= 'dropdownedit'></e-column>
                                                            <e-column field='productLineTotal' headerText='Line Total' width='200' editType='numericedit' [allowEditing]="false" [valueAccessor]='countLineTotal'></e-column>
                                                        </e-columns>
                                                        <e-aggregates>
                                                            <e-aggregate>
                                                                <e-columns>
                                                                    <e-column columnName="productLineTotal" type="Custom" [customAggregate]="customAggregateFn" format="C2">
                                                                        <ng-template #footerTemplate let-data>Total: ${{data.Custom}}</ng-template>
                                                                    </e-column>
                                                                </e-columns>
                                                            </e-aggregate>
                                                        </e-aggregates>
                                                    </ejs-grid>
<END OF HTML>

I am loading the data with AJAX

<component.ts>
@ViewChild('grid') public grid: GridComponent;
$.ajax({
    type: 'GET',
    url: 'http://abc.com',
    data: {},
    success: (data) => {
        this.grid.dataSource = d.products;
    }

});

public customAggregateFn = (sdata: any) => {
    let sum = 0;
    sdata.result.forEach((e) => {
      sum = sum + (e.productQuantity * e.productPrice);
    })
    this.calculateTotalAmount();
    return sum;
  }
<end of component.ts>

Now when I run my code, it return: ERROR TypeError: Cannot read property 'firstChild' of undefined

Any idea how to get this done ? I am using custom aggregate to count qty * price. Please advice

1 Reply 1 reply marked as answer
BS Balaji Sekar Syncfusion Team June 29, 2020 09:28 AM UTC

Hi Ronald, 
 
Greetings from the Syncfusion support. 
 
We have validated your query with provided the information and we suspect that you have called the actionComplete event from customAggregate function, it will be affect the Grid rendering. So, please share the code definition of the actionComplete(calculateTotalAmount) event to us that will help to validate further. 
 
And we suggest you to use Ajax process in load event of the Grid. Please refer the below code example 
[app.component.html] 
 <ejs-grid [dataSource]="data" [allowPaging]="true" (load)='load($event)'> 
    .         .         .        . 
 </ejs-grid> 
 
[app.component.ts] 
load(){ 
$.ajax({ 
    type: 'GET', 
    url: 'http://abc.com', 
    data: {}, 
    success: (data) => { 
        this.grid.dataSource = d.products; 
    } 
}); 
} 
  
Regards, 
Balaji Sekar 


Marked as answer
Loader.
Up arrow icon