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.
Unfortunately, activation email could not send to your email. Please try again.

Column Totals on Summary Row

Thread ID:

Created:

Updated:

Platform:

Replies:

129056 Feb 23,2017 10:57 AM Feb 27,2017 12:55 AM ASP.NET Core 3
loading
Tags: Grid
Gary Whiteside
Asked On February 23, 2017 10:57 AM

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.

Thanks

Gary


Saravanan Arunachalam [Syncfusion]
Replied On February 24, 2017 01:00 AM

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"> 
        . . . 
         <e-summary-rows> 
           <ej-summary-row title="Sum"> 
                   <e-summary-column> 
                    <ej-summary-column summary-type="custom" custom-summary-value="findTotal" format="{0:C2}" display-column="Freight3" /> 
                   <e-summary-column> 
           </ej-summary-row> 
         </e-summary-rows> 
     <e-columns> 
        <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> 
    </e-columns> 
</ej-grid> 
[JS] 
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. 
Regards, 
Saravanan A. 


Gary Whiteside
Replied On February 24, 2017 03:31 AM

Thanks for the reply.

I achieved what I needed by using....

.ShowSummary()
                              .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 =>
                                  {
                                      col.Field("Name").HeaderText("Name").Width("40%").Add();
                                      col.Field("Field1").HeaderText("Field1").Width("20%").Add();
                                      col.Field("Field2").HeaderText("Field2").Width("20%").Add();
                                      col.Field("Field3").HeaderText("Field3").Width("20%").Add();
                                  }).Render();

Saravanan Arunachalam [Syncfusion]
Replied On February 27, 2017 12:55 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;