Paging not working with custom aggregates

[Zietse Boonen | Castars]

Dear Support

I am trying to get the [customAggregate] function to work inside my grid. With 1 full page it works as intended but when I start paging with for example 100 records per page it recalculates my footers too. What I want is that my footer uses the full data of the data source and not the paged version. I tried solving this with the following function but it doesn't seem to work. But be aware I still want for example that when filters are applied that this still works and that the footer only takes into account the filtered results.

this is my html templated aggregate I use to pass my function with a parameter

Online they said I should resolve this with looping over different pages and counting everything up but this doesn't work. I think it has something to do with the this.gridSettings.pageCount because it always seems to be 8 even if I change the records per page.

this is my custom aggregate function:

 As you can see I am on page 11:

But the print that you can see in the screenshot that contains my aggregate it says there are always 8 pages which I find strange:

I hope this was a detailed enough description and hope to hear from you soon :)

Thank you in advance !

Greetings

Zietse Boonen

Dev. @ Castars

[Santhosh Iruthayaraj]

Hi Zietse Boonen,

Greetings from Syncfusion support.

To display the custom aggregate value based on the entire data of the Grid, we recommend setting the “groupSettings.disablePageWiseAggregates” property to true. Calculate the aggregate value inside the “customAggregate” function using the data received in the “result” property of the customAggregateFn argument.

From your code samples, we noticed that you are calculating the custom aggregate value based on the currentViewData and manually passing the column.field property inside the customAggregateFn in the HTML page. By default, the customAggregateFn will receive the customData to calculate custom aggregate, and we recommend using that value instead of manually passing the column.field.

[app.component.html]

 

    <e-aggregates>

      <e-aggregate>

        <e-columns>

          <e-column

            columnName="ShipCountry"

            type="Custom"

            [customAggregate]="customAggregateFn"

          >

            <ng-template #footerTemplate let-data

              >Brazil Count: {{ data.Custom }}</ng-template

            >

          </e-column>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

 

[app.component.ts]

 

 public customAggregateFn = (customData) => {

    return customData.result.filter(

      (item: object) => item['ShipCountry'] === 'Brazil'

    ).length;

  };

 

Sample: https://stackblitz.com/edit/angular-grid-with-custom-aggregates

groupSettings.disablePageWiseAggregates API: https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/#disablepagewiseaggregates

By setting the groupSettings.disablePageWiseAggregates property to true, the customAggregateFn arguments will receive the entire Grid data in the result property. Calculating the aggregate value using the result will help you achieve the desired outcome. As you can observe in the sample, the custom aggregate displays the Brazil count based on the entire dataSource.

Regards,
Santhosh I