1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dynamic aggregate columns in TreeGrid

Dynamic aggregate columns in TreeGrid

Hello

I am having a problem with adding aggregate columns dynamically. The aggregate data is loaded from a separate endpoint and will arrive after the grid has already rendered, so I cannot define all the aggregates before the grid is rendered in html template or in ngOnInit.

Problem is that I can't find any way to add aggregate columns to an already rendered grid.
If I remove [aggregates]="aggregateColumn" from the html template and try to add it later with this.treegrid.aggregates = this.aggregateColumn I get errors.
So I am forced to first initialize with empty aggregates: 
this.aggregateColumn =  [{ columns: [] }];  
and then try to fill the aggregate columns later when the external call finishes.


As you can see from the above stackblitz, the columns disappear from the grid if I load with empty aggregates.
In my actual case it freezes the browser window completely and I have to kill the process if I try to initialize with empty aggregates.


Is there some way I can add the aggregate columns later?

Thank you

EDIT. in my actual case it does not actually completely freeze the browser. It depends on how many rows in the grid there are it seems. I left the profiler running while trying to switch pages in the grid with empty aggregates and it actually finished it in a minute or so. 
Seems like "calculateSummaryValue" is the problem.

6 Replies
MP Manivannan Padmanaban Syncfusion Team April 10, 2020 12:25 PM UTC

Hi Joonas , 

Greetings from Syncfusion Support. 

We are able to reproduce the reported issue in the shared sample, on further validating we could see that aggregate column is not initialized properly which causes the reported issue. Kindly refer the below code example, 

[app.component.ts]  
  ngOnInit(): void {   
  this.aggregateColumn =  [];  
.     .      .     .  .  
}  
  
  

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 
Manivannan Padmanaban 


JL Joonas Limberg April 10, 2020 12:46 PM UTC

Thank you for the reply. 
The modified stackblitz example still shows an empty grid for me.



EDIT.

I can see the solution of just initializing with this.aggregateColumn = [] does the trick in my own code (must be something else in the stackblitz that makes the data not appear).

Thank you very much!


MP Manivannan Padmanaban Syncfusion Team April 10, 2020 12:50 PM UTC

Hi Joonas, 

Sorry for the inconvenience caused. 

Please refer to the below sample, 

Regards, 
Manivannan Padmanaban 


SC Sergio cortes blanquez replied to Manivannan Padmanaban August 28, 2020 01:24 PM UTC

Hi Joonas , 

Greetings from Syncfusion Support. 

We are able to reproduce the reported issue in the shared sample, on further validating we could see that aggregate column is not initialized properly which causes the reported issue. Kindly refer the below code example, 

[app.component.ts]  
  ngOnInit(): void {   
  this.aggregateColumn =  [];  
.     .      .     .  .  
}  
  
  

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 
Manivannan Padmanaban 


OOHH this code is very interesting to add dinamically aggregates.
 this.aggregateColumn =  [{
            columns: [
             {
                type: 'Custom',
                field: 'duration',
                format: 'C2',
                footerTemplate: 'Sum: ${Custom}',
                customAggregate: this.customAggregateFn
            }, 
            {
                type: 'Custom',
                field: 'progress',
                format: 'C2',
                footerTemplate: 'Average: ${Custom}',
                customAggregate: this.customAggregateFn
            }
            ]

Is possible to user the typical aggregates likes count... in this example? I have tried to use count aggregate but I don't know like access to count aggregate variable to modify the footerTemplate message, is possible?



SC Sergio cortes blanquez August 28, 2020 01:34 PM UTC

I put imagination...

 this.aggregateColumn =  [{
        columns: [
         {
            type: 'Count',
            field: 'maquina',
            footerTemplate: 'Count: ${Count}',

        }

PK Padmavathy Kamalanathan Syncfusion Team August 31, 2020 12:54 PM UTC

Hi Sergio, 
 
Thanks for contacting Syncfusion Forums. 
 
Query:  Is possible to user the typical aggregates likes count & to modify the footerTemplate message 
 
Yes, It is possible to use the default aggregate like count when we are using dynamic aggregates.  
 
Please check the below code snippet, 
 
 
 
  setTimeout(() => { 
    this.aggregateColumn =  [{ 
    columns: [ 
     { 
        type: 'Count', 
        field: 'UnitWeight', 
        format: 'C2', 
        footerTemplate: 'My UnitWeight Total Count: ${Count}', 
    } 
    ] 
}]; 
}) 
 
 
We have some built in aggregates using which we can find Sum, Average ,Count etc. Also we can customize the text message which appears in the footerTemplate as shown above(We have set the message as “My UnitWeight Total Count”).  
 
If you need to calculate aggregate value with your own aggregate function, we suggest you to use the custom aggregate option. 
 
Please check the below help documentations, 
 
Kindly get back to us for further assistance. 
 
Regards, 
Padmavathy Kamalanathan 


Loader.
Up arrow icon