Custom Aggregation at Footer Level

Custom Aggregation at Footer Level

Posted by: muhammad.f.mehboob on 14 November 2023, 6:05 am EST

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 14 November 2023, 6:05 am EST

  Hi Team,

  I have a requirement where I have to add three custom footer rows at the bottom of the Flexgrid. I then need to conditionally aggregate the column values from the grid and assign the totals to each footer row. For example:

  I have four columns:

  Type Jan Feb Mar
  
  Car 10 20 15
  
  Car 15 10 25
  
  Car 10 25 5
  
  Bike 10 20 15
  
  Bike 15 10 25
  
  Truck 10 25 5

  I need to add totals at the bottom for Cars, Bikes and Trucks.

  Type Jan Feb Mar
  
  Cars Total 35 55 45
  
  Bikes Total 25 30 40
  
  Trucks Total 10 25 5

  How can I do that?

  Thank you,
  
  Muhammad Faisal

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2023, 11:06 pm EST

  Hi,

  To create the aggregates as per your use case, you need to manually push rows in the columnFooters panel of FlexGrid. Also, to aggregate the data please use an auxiliary collectionview that will generate groups based on the types. You may then use these groups to get the aggregates using the getAggregate() method of the CollectionViewGroup class from the respective groups.

  Please refer to this sample for reference: https://stackblitz.com/edit/js-axyk4e

  You may also try group aggregation of FlexGrid which uses the aggregate property of the columns to automatically show the aggregate data in a group row responsible for a particular group. For example, if in the below DEMO sample, data is grouped using ‘country’ then the data will be aggregated and grouped based on the values present in the country column.

  Please refer to this DEMO sample: https://developer.mescius.com/wijmo/demos/Grid/Aggregation/Aggregategroup/purejs

  Regards

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 15 November 2023, 6:02 am EST

  Hi Anirudh,

  Thank you for the response. I also want to update/refresh my totals when someone filters the grid and I am using Angular 6+.

  Thank you

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 15 November 2023, 10:44 pm EST

  Hi,

  I have updated the sample as per the requirement. To update the aggregates after filtering please handle the loadedRows event and provide the updated items to the temporary collectionView that is prepared to get the groups and their aggregates. The aggregates will then be calculated as per the filtered items.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-7ftvem

  Regards

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 16 November 2023, 5:42 am EST

  Hi Anirudh,

  Thank you for updating the sample. I am getting “Cannot read properties of undefined (reading ‘collectionChanged’)” error message. I think that’s because my collectionView is not available when the grid is created since I am fetching data from the server. Any solution to that?

  Thank you

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2023, 8:08 pm EST

  Hi,

  Sorry for the late reply. Yes, your observation is correct. Since at the time of adding handler to the collectionChanged event, the data is not populated in the FlexGrid so the collection view is not defined. That is, the FlexGrid has not yet created a CollectionView for its data. This results in this error. For resolving this, you can assign an object of type CollectionView to the FlexGrid’s itemsSource property. This will ensure that the FlexGrid’s collectionView property is assigned to the appropriate type value. Later, when the data is completly fetched from the API then you may update the sourceCollection property of the CollectionView with the fetched data array.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-xwh9wn

  Thank you for your understanding.

  Regards