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

Column Totals on Summary Row

I want to display column totals on my grid and I have got this working using the summaries with sum. However as I am looking to display the totals of 3 column it displays the totals in 3 rows at the bottom of the grid.

Can the totals for each column be displayed on a single row at the bottom? I have tried to change the code available in the support documentation with no luck.



3 Replies

SA Saravanan Arunachalam Syncfusion Team February 24, 2017 06:00 AM UTC

Hi Gary, 
Thanks for contacting Syncfusion’s support. 
We have analyzed your query and achieved it by using custom summary feature of Grid control and please refer to the below code example. 
<ej-grid id="FlatGrid" allow-paging="true" show-summary="True"> 
        . . . 
           <ej-summary-row title="Sum"> 
                    <ej-summary-column summary-type="custom" custom-summary-value="findTotal" format="{0:C2}" display-column="Freight3" /> 
        <e-column field="CustomerID" header-text="CustomerID" text-align="Right" width="75"></e-column> 
        <e-column field="Freight1" text-align="Right" format="{0:C2}" width="75"></e-column> 
        <e-column field="Freight2" text-align="Right" format="{0:C2}" width="75"></e-column> 
        <e-column field="Freight3" text-align="Right" format="{0:C2}" width="75"></e-column> 
function findTotal() { 
            var gridObj = $("#Grid").ejGrid("instance"); 
            var sum = ej.sum(gridObj.model.dataSource, "Freight1") + ej.sum(gridObj.model.dataSource, "Freight2") + ej.sum(gridObj.model.dataSource, "Freight3"); 
            return sum; 
And also refer to the following online documents to know more about custom summary of Grid control. 
Saravanan A. 

GW Gary Whiteside February 24, 2017 08:31 AM UTC

Thanks for the reply.

I achieved what I needed by using....

                              .SummaryRow(row =>
                                  row.Title("").SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field1").DataMember("Field1").Add(); }).SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field2").DataMember("Field2").Add(); }).SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field3").DataMember("Field3").Add(); }).Add();

 .Columns(col =>

SA Saravanan Arunachalam Syncfusion Team February 27, 2017 05:55 AM UTC

Hi Gary,  
Thanks for your update.            
We hope that the provided information helped you. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon