Aggregation in the parent row

[Shurik]

How to calculate the sum of money of children in the parent's line? Not at the bottom, but in the parent line. So that the amount is updated when editing children. That is, the same as aggregation, only in the parent row.

[Farveen Sulthana Thameeztheen Basha]

Hi Shurik, 

Thanks for contacting  Syncfusion Support. 

 

Query#:- How to calculate the sum of money of children in the parent's line? 

 

By default, In our Syncfusion TreeGrid we can have Child Aggregate feature. qTo achieve your requirement by enabling showChildSummary property,  Aggregate value is calculated for child rows, and it is displayed in the parent row footer. 

 

Refer to the code example:- 

 

<ejs-treegrid [dataSource]='data' height='240' [treeColumnIndex]='0'  childMapping='children' > 

        <e-columns> 

                  .   .    . 

             <e-column field='UnitWeight' headerText='Weight Per Unit' textAlign='Right' type='number' width=130></e-column> 

              <e-column field='TotalUnits' headerText='Total Units' textAlign='Right' type='number' width=125></e-column> 

        </e-columns> 

        <e-aggregates> 

        <e-aggregate [showChildSummary]='true'> 

            <e-columns> 

               <e-column field="UnitWeight" type="Sum"> 

                    <ng-template #footerTemplate let-data>Maximum: {{data.Sum}}</ng-template> 

                </e-column> 

            </e-columns> 

           </e-aggregate> 

        </e-aggregates> 

    </ejs-treegrid>`     

 

Note:- Using type property as Sum we can show the calculated value of the corresponding field. 

 

Refer to the screenshot:- 

 

 

Query#:- So that the amount is updated when editing children. 

While on Editing the record we need to refresh the TreeGrid to show the updated the values of Editing on Aggregates. In order to achieve that we have  used actionComplete event of the TreeGrid with type as save.  

Refer to the code below:- 

App.component.html 

<ejs-treegrid [dataSource]='data' height='240' [treeColumnIndex]='0'  childMapping='children' (actionComplete)="actionComplete($event)" > 

        <e-columns> 

             <e-column field="FreightID" isPrimaryKey="true" headerText="Freight ID" width="130" ></e-column> 

                .    .  . 

       </e-columns> 

</ejs-treegrid>` 

 

App.Component.ts 

     export class AppComponent { 

              public data: Object[] = []; 

              public editSettings: Object; 

             

              public treegrid: TreeGridComponent; 

              actionComplete(args) { 

                  if (args.type == "save") { 

                      this.treegrid.refresh();   //refresh the TreeGrid while on Editing 

                  }     

              } 

                  .      .     . 

       

      } 

    

Sample Link:- https://stackblitz.com/edit/angular-enpmub-hj5oyk 

Screenshot:- 

 

 

API Link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#actioncomplete 

 

You can also Custom summary to show customized value on Aggregate. If your requirement is different from above please share more details like Screenshot to proceed further. 

 

Regards, 

Farveen sulthana T 

[Shurik]

I can recursively recalculate the sum in the model and update the treegrid after each change. But maybe there is an easier way to use the sum from the aggregation to update the model?

Even in my case, this sum does not need to be stored in the model, this column is calculated in both children and parents.

[Farveen Sulthana Thameeztheen Basha]

Hi Shurik, 

From your Screenshot, we understood that you need to show the Calculated Sum value of the children only in parent row (i.e. don’t need to display using Aggregate). In order to achieve this requirement we suggest you use to  valueAccessor property of the TreeGrid columns. Using this you can calculate sum of the values of childRows and display it in the parent row. While on Editing we have refresh TreeGrid in actionComplete event. 

Refer to the below code example:- 

App.Component.html 

<ejs-treegrid #treegrid [dataSource]="data" height="400" childMapping="children" 

              .    .    . 

     (actionComplete)="actionComplete($event)"> 

    <e-columns> 

        <e-column field="FreightID" isPrimaryKey="true" headerText="Freight ID" 

                  width="130"></e-column> 

             .     .      . 

       <e-column field="UnitWeight" 

                  headerText="Weight Per Unit" 

                  textAlign="Right" 

                  type="number" 

                  editType='numericedit' 

                  [valueAccessor]='totalChildValue' 

                  width="130"></e-column> 

         

    </e-columns> 

      

</ejs-treegrid> 

 

App.Component.ts 

   export class AppComponent { 

     public data: Object[] = []; 

     public editSettings: Object; 

   

      @ViewChild("treegrid") 

      public treegrid: TreeGridComponent; 

      actionComplete(args) { 

         if (args.type == "save") { 

             this.treegrid.refresh();     //refresh the TreeGrid upon saving  

          } 

       } 

     ngOnInit(): void { 

     this.data = summaryRowData; 

      

     totalChildValue(field, data, column) { 

        if (isNullOrUndefined(data.parentItem)) { 

           let totalUnitWeight = 0; 

           data.children.map(row => (totalUnitWeight += row["UnitWeight"]));  //Sum the childvalues and update the parentrow Value 

           return totalUnitWeight; 

         } 

        return data.UnitWeight; 

     } 

    } 

   

 

Refer to the documentation Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#valueaccessor 

 

Sample Link:-  https://stackblitz.com/edit/angular-enpmub-t72clc 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Farveen sulthana T