Total Column

[PDev]

Hi,

I have tree grid with dynamic columns and i intend to add one total column to show ROW Total. 

what will be the right approach to do that 

If you can help me get started! 

[Farveen Sulthana Thameeztheen Basha]

Hi Parth, 

Thanks for contacting Syncfusion Support. 

Query#:- I have tree grid with dynamic columns and i intend to add one total column to show ROW Tota 

 

We have checked your query and we can add template column while adding columns dynamically using template property of the Tree Grid as like given below. 

Refer to the code below:- 

App.Component.html 

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='0' [columns]="treegridColumns"> 

</ejs-treegrid> 

 

 

<ng-template let-data #template1> 

    {{data.taskID + data.progress + data.duration}}  //define the template column here 

</ng-template> 

 

App.component.ts 

  @ViewChild("template1") 

  public temp1: NgModel; 

 

  @ViewChild("treegrid") 

  public treegrid: TreeGrid; 

  public treegridColumns: any; 

 

  ngOnInit(): void { 

    this.data = sampleData; 

  } 

  ngAfterViewInit() { 

    this.treegridColumns = [ 

      { 

        field: "taskID", 

        isPrimaryKey: "true", 

        headerText: "Task ID", 

        width: "90" 

      }, 

      .   .    . 

     { headerText: "taskName", width: "90", template: this.temp1 }  //declare the template column here 

    ]; 

  } 

Sample Link:-  https://stackblitz.com/edit/angular-ktyk4x-3avfpf 

Documentation and Demo Links:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#column-template 

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/columntemplate 

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

Regards, 

Farveen sulthana T 

[PDev]

Thanks for the reply. but i think this wont work for me, because i have dynamic column in grid on which i wanted to have total column.

do you have any sample for the same ? Also, it looks like it works on the data and not on column. I need to have functionality which works on the Cell Edit event as well.

I could also see similar example here for JS Sum Column

However what could not understand is "this.model" 

function updateRecord(args){

        

        var data = args.data,

            updatedRecords = this.model.updatedRecords,

            index = updatedRecords.indexOf(data),

            record = updatedRecords[index],

            sum = data.duration + data.progress;

        

       record.sum = record.item.sum = sum;

        this.refreshRow(index);

        

        

      }

[Farveen Sulthana Thameeztheen Basha]

Hi Parth, 

We have achieved your requirement using actionComplete event of the TreeGrid. In this event we have calculated the values of the required columns and displayed it in the Sum column using setCellValue method of the TreeGrid(as like provided example) 

Refer to the code below:- 

App.Component.html:- 

<ejs-treegrid #treegrid [dataSource] = 'data' childMapping = 'subtasks'[treeColumnIndex] = '0'[columns] = "treegridColumns" 

        (actionComplete) = 'actionComplete($event)'[editSettings] = 'editSettings'[toolbar] = 'toolbar' > 

  </ejs-treegrid > 

App.Component.ts 

export class AppComponent implements OnInit { 

  public data: Object[] = []; 

  public template: any; 

  public editSettings: Object; 

  public toolbar: string[]; 

  @ViewChild("treegrid") 

  public treegrid: TreeGrid; 

  public treegridColumns: any; 

  ngOnInit(): void { 

    this.data = sampleData; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: "Cell" 

    }; 

    this.toolbar = ["Add", "Delete", "Update", "Cancel"]; 

  } 

  actionComplete(args) { 

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

      if (args.column.field == "progress" || args.column.field == "duration") { 

        var total = args.data.progress + args.data.duration; 

        this.treegrid.setCellValue(args.data.taskID, "Sum", total);     //using setCellValue method update the calculative value to Sum column 

      } 

    } 

  } 

Sample Link:- https://stackblitz.com/edit/angular-ktyk4x-tsg68c 

Screenshot:- 

 

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

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

Note:- this.model is nothing but this.treegrid (i.e treegrid Instance that  you can get from viewChild in EJ2 TreeGrid as like in above sample. 

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

Regards, 

Farveen sulthana T