We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to group data and calculate sum with a formula

An example dataset looks like this:

{'Amazon', 'productABC', '1.23', '8'}
{'Walmart', 'productCDE', '100', '2'}
{'Amazon', 'thing1', '200', '2'}
{'Walmart', 'thing2', '100', '2'}
{'twinings', 'thing3', '80', '5'}

Trying to group by the first column, and calculate a 5th column with numbers in the 3rd and 4th column. 
the example outcome for Amazon will be
{'Amazon', blank, '201.23', '10', '20.123'}   

Notice the last column is calculated with a formula from grouping by first column. 

3 Replies

MS Mani Sankar Durai Syncfusion Team September 18, 2017 10:53 AM UTC

Hi Kam, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link. 
In this sample we have enable grouping for the column 1 and set the summary value based on the first column. Also we have displayed the sum of the 3rd and 4th column in the 5th column using template property of columns in grid.  
Refer the code example 
  <script id="columnTemplate" type="text/template"> 
        <span>{{:Freight + ID }}</span> 
export class AppComponent { 
    public groupSettings = { groupedColumns: ["Order"] };  //set grouping for column 1 
    public summaryRows = [{ 
        summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}", prefix: "Sum = " }, 
            { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "ID", dataMember: "ID", prefix: "Sum = " }, 
         //set summary value for column 3 and 4 
    public columnTemplate = "#columnTemplate"; //assign template for the column 
  @ViewChild('grid') Grid: EJComponents<any, any>; 
<ej-grid #grid [dataSource]="gridData" [allowPaging]="true" [allowGrouping]="true" [showSummary]="true"  [groupSettings]="groupSettings" [summaryRows]="summaryRows"> 
        <e-column field="ID" headerText="ID" width="75" textAlign="right"></e-column> 
         <e-column field="Freight" headerText="Freight" width="75" format="{0:C}" textAlign="right"></e-column> 
          <e-column field="Sum" headerText="Sum" width="75"[template]="columnTemplate" textAlign="right"></e-column> 

Refer the documentation link. 

If you need to set the summary value for the 5th column (i.e template column) it can be achieved using custom summary feature in grid.  
Refer the documentation link. 

Please let us know if you need further assistance. 

Manisankar Durai. 

KL Kam Lo September 18, 2017 04:08 PM UTC


cannot view this link. It's blocked. how are we suppose to view the example? Thank you. 

MS Mani Sankar Durai Syncfusion Team September 19, 2017 12:15 PM UTC

 Hi Kam,  
The give download link working fine for us, please check with your network team, may your network blocked our Syncfusion downloads.  
You can get file using FTP. Please find the FTP Credentials for accessing our server folder in below. Also, please refer the attached document to get the more details about this.   
Host: www.syncfusion.com    
Username: Kamlo   
Password: rnaN9s-s   

Please follow below steps:  
Go to Edit-> Settings and ensure the below settings before connecting to the FTP.  
  1. FTP Transfer mode must be ‘Passive’.
  1. For active mode, enable the option as like in the screenshot.
  1. For passive mode, enable the option as like in the screenshot,
  1. Click ‘OK’ to save the settings
  2. If the Passive mode does not work. Please use the active mode to connect to the server.
Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon