1. Home
  2. Forum
  3. Vue
  4. Sum aggregate on a computed column

Sum aggregate on a computed column

(using vue 3)

Hello,

I have a simple requirement for my grid, 4 columns: Reference, UnitPrice, Quantity and Total.

Total column is computed column UnitPrice x Quantity

<ejs-grid :dataSource="data" :allowGrouping='true' :groupSettings='groupSettings' :editSettings='editSettings' :toolbar='toolbar'>
<e-columns>
<e-column field="Reference" width="100"></e-column>
<e-column field="UnitPrice" width="80"></e-column>
<e-column field="Quantity" editType='numericedit'></e-column>
<e-column headerText='Total Price' textAlign='Right' :valueAccessor='totalPrice'></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="TotalPrice" format="C2" :footerTemplate="sumTemplate" >
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
.../...
var sumVue = app.component('sumTemplate', {
  data: () => ({}),
  template:`<b>Sum:{{data.Sum}}</b>`});
.../...
methods: {
  totalPrice: function(field, data) {
    return data.Quantity * data.UnitPrice;
  }
}

How can I locate the sum aggregate in the footer of column Total price ?

How can I get the sum of column Total price ?

Thanks for your help !


5 Replies
RR Rajapandi Ravi Syncfusion Team November 26, 2021 01:27 PM UTC

Hi Julien, 

Greetings from Syncfusion support 

From your update we could see that you like to calculate the Total price and display the aggregate value. You can achieve your requirement by using Custom aggregate.  

Sometimes you can have a scenario to calculate aggregate value using your own aggregate function, we can achieve this behavior using the custom aggregate option. To use custom aggregation, specify the type as Custom and provide the custom aggregate function in the customAggregate property. Please refer the below documentation for more information. 


Rajapandi R 


JH Julien Hoffmann November 30, 2021 04:14 AM UTC

Hi, 

Thanks for your reply. Let me describe better my requirements using the table below.

The header/columns is in bold

The rows are grouped by category column

The total per row (in red) is price x quantity, a computed column

The aggregates are in yellow per group

The summary is in green.

Is this scenario possible ? Thanks again.


categoryreferencepricequantitytotal
shirts

3125

turtle neck55155

t-shirt35270
pants

5478

Jeans1102220

Jogger863258
Total

8603


The data for the above would look like this :

[
{category: shirts, reference: turtle neck, price: 55, quantity: 1},
{category: shirts, reference: t-shirt, price: 35, quantity: 2},
{category: pants, reference: jeans, price: 110, quantity: 2},
{category: pants, reference: jogger, price: 86, quantity: 3}
]



RR Rajapandi Ravi Syncfusion Team December 1, 2021 12:52 PM UTC

Hi Julien, 

Thanks for the update 

From your update, we could see that you like to calculate the price and quantity value and displayed the Total value in the Grid column also you like to show the Sum aggregate for the Total column. From checking your datasource code example we could see that you are not maintaining Total field in your datasource. So based on your query we have prepared a sample and achieved your requirement by using custom aggregate. Please refer the below code example and sample for more information. 

 
<ejs-grid 
      :dataSource="data" 
      :allowFiltering="true" 
      :filterSettings="filterSettings" 
      :allowPaging="true" 
      :pageSettings="pageSettings" 
      :queryCellInfo="queryCellInfo" 
    > 
      <e-columns> 
        .  .  .  .  .  .  .  .  .  
        .  .  .  .  .  .  .  .  . 
        <e-column field="Total" headerText="Total"></e-column> 
      </e-columns> 
      <e-aggregates> 
        <e-aggregate> 
          <e-columns> 
            <e-column 
              columnName="Total" 
              type="Custom" 
              :customAggregate="customAggregateFn" 
              :footerTemplate="footerTemp" 
            ></e-column> 
          </e-columns> 
        </e-aggregate> 
      </e-aggregates> 
    </ejs-grid> 
 
export default { 
  data() { 
    return { 
      data: [ 
        { 
          category: "shirts", 
          reference: "turtle neck", 
          price: 55, 
          quantity: 1, 
        }, 
        { category: "shirts", reference: "t-shirt", price: 35, quantity: 2 }, 
        { category: "pants", reference: "jeans", price: 110, quantity: 2 }, 
        { category: "pants", reference: "jogger", price: 86, quantity: 3 }, 
      ], 
      footerTemp: function () { 
        return { 
          template: Vue.component("footerTemplate", { 
            template: `<span>Total: {{data.Custom}}</span>`, 
            data() { 
              return { data: {} }; 
            }, 
          }), 
        }; 
      }, 
      filterSettings: { type: "Menu" }, 
      pageSettings: { pageCount: 3 }, 
    }; 
  }, 
  methods: { 
    customAggregateFn: function (data) { 
      var sum = 0; 
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      var val = grid.dataSource.filter((e) => { 
        sum = sum + e.price * e.quantity; 
      }); 
      return sum; //here we have calculated the price and quantity manually then return the sum value 
    }, 
    queryCellInfo: function (args) { 
      if (args.column.field === "Total") { 
        args.cell.innerText = args.data.price * args.data.quantity; //in initial rendering we have calculate and set the price and quantity for the Total column 
      } 
    }, 
  }, 
  provide: { 
    grid: [Filter, Page, Aggregate], 
  }, 
}; 
</script> 
<style> 
@import "https://cdn.syncfusion.com/ej2/material.css"; 
</style> 
 



Note: By default, in our EJ2 Grid, we have performed all Grid action such as Paging, Filtering, Sorting etc.. based on the Grid datasource fields. You cannot perform the Grid actions for the column which was not exist in the Grid datasource fields. 

Rajapandi R 


JH Julien Hoffmann December 1, 2021 01:12 PM UTC

Hi,

Thank you very much for your help. We are getting close !

It is still missing grouping and group aggregates. 

Please have a look as this fork from your original code: https://codesandbox.io/s/vue-forked-zgj0f

When I edit a quantity, the total is not correct.

Julien


RR Rajapandi Ravi Syncfusion Team December 2, 2021 12:49 PM UTC

Hi Julien, 

Thanks for the update 

From your update, we could see that you like to update the aggregate value while editing the Price and Quantity column. Based on your query we have prepared a sample and achieved your requirement by using ValueAccessor feature of Grid and also invoke the refresh() method to refresh the aggregate value. Please refer the below code example and sample for more information. 

 
methods: { 
    customAggregateFn: function (data) { 
      var sum = 0; 
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      var val = grid.dataSource.filter((e) => { 
        sum = sum + e.price * e.quantity; 
      }); 
      return sum; 
    }, 
    valueAccess: function (field, data, column) { 
      return data.price * data.quantity; 
    }, 
    actionComplete: function (args) { 
      if (args.requestType === "save" && args.action === "edit") { 
        var grid = document.getElementsByClassName("e-grid")[0] 
          .ej2_instances[0]; 
        grid.aggregateModule.refresh();   //refresh the aggregate value after update 
      } 
    }, 
  }, 



Rajapandi R 


Loader.
Up arrow icon