Custom aggregates memory issue

[Zietse Boonen | Castars]

Dear support

I have a question regarding the angular synfusion grid component. I defined my own "syncfusion table" component inside my angular application extending the functionality of the normal component. 

The problem that i'm having is that when I try to implement paramterized aggregates where I loop over the aggreates with *ngFor in my html. if I loop on the columns inside my aggregates I get huge memory issues after running my page for about 1 minute. The memory keeps climbing. 

But when I define a different approach where I loop over the aggregates instead of the column definitions I don't get the memory issues, but this gives me a wrong result because now all the custom aggregates are on a separate row which I don't want. See my screenshots below (first the lag implementation and after the fixed implementation but not with the desired result) is there any way to fix this or is this a bug in the syncfusion library?

html implementation (lag version)

html implementation (non lag version)

What I noticed after debugging the difference in implementations. I noticed that with the first implementation (the lag one) is that the custom aggregate function constantly gets executed even if nothing changed inside the grid and I don't think this should be the desired workflow.

With the secondary implementation I don't have this issue and it only updates all the aggregates once when needed.

So in general I am asking how can I make it so that I have all my aggregates on 1 line but without the extreme lag.

I hope my issue is described clearly in the above post and if you need any clarification let me know !

hope to hear from you soon

Greetings

Zietse Boonen
Dev@Castars

[Aishwarya Rameshbabu]

Hi Zietse Boonen,

Greetings from Syncfusion support.

Upon reviewing your query, it has come to our attention that you are encountering a memory issue while iterating over the aggregates with 'ngFor'. Before moving forward with a solution, we kindly request additional information to help replicate and address the issue effectively.

• Kindly share the column definition of the Grid that you have specified in the variable 'cols'.
• Please share the type of data binding used in Grid (Remote or Local data binding).
• If Remote data is being used, please specify the adaptor details along with the code lines defining the DataManager.
• Please provide the complete Grid rendering code, including the lines of code for the custom aggregate function.
• Specify the version of the Syncfusion package you are currently using.
• If possible, provide a simple sample to replicate the issue.
• If possible, please share video demonstration of issue replication.

These details will help us validate the reported query and provide a solution as soon as possible.

Regards

Aishwarya R

[Zietse Boonen | Castars]

Hi Support

Sorry if my description wasn't clear enough here is the extra information you asked for:

1. here you can see the cols definition where I actually display my grid
   
   
2. This is the HTML that I use to couple this to my own wrapper:
   
   
3. I am using Local data binding for my datasource
4. The actual function that calculates the aggregates, I use the found column so that I only refresh the column aggregate when necessary otherwise I just return the aggregate bound to that column.
   
   
5. my version of syncfusion grid component is: 21.1.41

The result that I get with the lag but the expected result in the end:

the result that I get without the lag but not the expected visuals:

[Zietse Boonen | Castars]

Hi support

I wonder if you already found a possible solution for this problem with my extra provided information ?

Thank you in advance

Greetings

Zietse Boonen

[Aishwarya Rameshbabu]

Hi Zietse Boonen,

Sorry for the inconvenience caused.

After reviewing the shared code examples, we have created a sample based on that. The continuous triggering of the custom aggregate function that you are experiencing is likely due to not properly calling the function within the aggregate template. Please refer to the code example below and the sample provided, where we utilized ngFor within a ng-container to loop over the columns and determine the aggregate type. Depending on the type, we called the custom function.

App.component.ts

 

    public customAggregateFn = (args, column) => {

        if (column.columnName === 'ShipCountry') {

            const distinct = DataUtil.distinct(this.data, 'ShipCountry', true);

            return distinct.length;

        }

        if (column.columnName === 'ShipName') {

            const distinct = DataUtil.distinct(this.data, 'ShipName', true);

            return distinct.length;

        }

 

    }

 

App.component.html

 

  <ejs-grid [dataSource]="data" #grid>

    <e-columns>

      <e-column *ngFor="let column of cols" [field]="column.field" [headerText]="column.headerText"

        [width]="column.width" headerTextAlign="center" textAlign="center"></e-column>

    </e-columns>

    <e-aggregates>

      <e-aggregate>

        <e-columns>

          <ng-container *ngFor="let column of cols">

            <e-column *ngIf="column.footer ==='Custom'" [type]="column.footer" [field]="column.field"

              [customAggregate]="customAggregateFn">

              <ng-template #footerTemplate let-data>Distinct Count: {{data.Custom}}</ng-template>

            </e-column>

            <e-column *ngIf="column.footer ==='Sum'" [type]="column.footer" [field]="column.field">

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

            </e-column>

          </ng-container>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

  </ejs-grid>

 

Sample: 187890-stkd-hdr-agg-top-22.2.9-customer-code-updated (forked) - StackBlitz

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R