We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Conditional Aggregate

I want to hide/show aggregate conditionally. If my condition is false then I don't want to create my aggregate footer and vice versa. 

7 Replies

DR Dhivya Rajendran Syncfusion Team February 11, 2020 01:45 PM UTC

Hi Punit, 

Greeting form Syncfusion. 

We have analyzed your requirement and you can hide and  show the aggregates dynamically based on your condition. In that sample, we have buttons and in that button click we have shown and hide the aggregates of Grid. 

Please refer the below sample for more information.  

If the above does not meet your requirement then share more details that will helpful for us to provide and better solution as soon as possible. 


SC Sergio cortes blanquez August 7, 2020 01:20 PM UTC

And there isn't and other way? It isn't a good practice to access the DOM directly

SK Sujith Kumar Rajkumar Syncfusion Team August 10, 2020 07:51 AM UTC

Hi Sergio, 
We checked your query and would like to let you know that you can access the Grid’s footer aggregate element from the Grid instance using which it can be hidden or shown. This is demonstrated in the below code snippet, 
hide() { 
    this.grid.aggregateModule.footerRenderer.contentTable.closest('.e-gridfooter').style.display = "none"; 
show() { 
    this.grid.aggregateModule.footerRenderer.contentTable.closest('.e-gridfooter').style.display = "block"; 
Sample based on this for your reference, 
Let us know if you have any concerns. 
Sujith R 

SC Sergio cortes blanquez September 17, 2020 09:11 AM UTC


SK Sujith Kumar Rajkumar Syncfusion Team September 18, 2020 07:08 AM UTC

Hi Sergio, 

You’re welcome. Please get back to us if you require any further assistance. 

Sujith R 

GW Gary Wilkins March 31, 2022 12:13 PM UTC


Is there a way to do exactly the same for this but for group footer aggregates?



RR Rajapandi Ravi Syncfusion Team April 1, 2022 02:10 PM UTC

Hi Gary,

We understand that you like to hide the Group footer aggregates in the Grid, you can achieve your requirements by using the external CSS. Please refer the below code example and sample for more information.




  .e-grid .e-summaryrow{

    display: none;



Sample: https://stackblitz.com/edit/angular-cmzsq4?file=index.html


Rajapandi R

Live Chat Icon For mobile
Up arrow icon