How to group data and calculate sum with a formula

[Kam Lo]

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. 

[Mani Sankar Durai]

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. 

Link:  http://www.syncfusion.com/downloads/support/forum/132702/ze/ejGrid_exporting-1609824946 

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 3^rd and 4^th column in the 5^th column using template property of columns in grid.  

Refer the code example 

[index.html] 

  <script id="columnTemplate" type="text/template"> 

        <span>{{:Freight + ID }}</span> 

    </script> 

 

[app.component.ts] 

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>; 

 

[app.component.html] 

<ej-grid #grid [dataSource]="gridData" [allowPaging]="true" [allowGrouping]="true" [showSummary]="true"  [groupSettings]="groupSettings" [summaryRows]="summaryRows"> 

     <e-columns> 

... 

        <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> 

             

    </e-columns>        

</ej-grid> 

Refer the documentation link. 

Link:  

https://help.syncfusion.com/api/angular/grid#members:columns-template 

https://help.syncfusion.com/api/angular/grid#members:summaryrows 

https://help.syncfusion.com/api/angular/grid#members:groupsettings 

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

Refer the documentation link. 

Link: https://help.syncfusion.com/api/angular/grid#members:summaryrows-summarycolumns-customsummaryvalue 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Kam Lo]

 http://www.syncfusion.com/downloads/support/forum/132702/ze/ejGrid_exporting-1609824946 

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

[Mani Sankar Durai]

 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.   

   

Credentials:    

   

Host: www.syncfusion.com    

Username: Kamlo   

Password: rnaN9s-s   

   

Document link - Connect to FileZilla Client application to download the studio setup   

 

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’.

  

   

  

  

2. For active mode, enable the option as like in the screenshot.

  

  

   

  

3. For passive mode, enable the option as like in the screenshot,

  

   

  

4. Click ‘OK’ to save the settings
5. If the Passive mode does not work. Please use the active mode to connect to the server.

  

   

 

 

Regards, 

Manisankar Durai.