Conditional Aggregate

[Punit]

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. 

[Dhivya Rajendran]

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.  

https://stackblitz.com/edit/angular-hide-show-aggregate?file=app.component.html 

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. 

Regards, 

R.Dhivya 

[Sergio cortes blanquez]

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

[Sujith Kumar Rajkumar]

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, 

 

Sample: https://stackblitz.com/edit/angular-hide-show-aggregate-h7sbko?file=app.component.ts 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Sergio cortes blanquez]

Thanks!

[Sujith Kumar Rajkumar]

Hi Sergio, 

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

Regards, 

Sujith R 

[Gary Wilkins]

Hi,

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

Thanks,

Gary

[Rajapandi Ravi]

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.

Index.html

 

<Style>

  .e-grid .e-summaryrow{

    display: none;

  }

  </style>

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

Regards,

Rajapandi R