Column Totals on Summary Row

[Gary Whiteside]

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]

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. 

https://help.syncfusion.com/aspnet-core/grid/getting-started#add-summaries  

https://help.syncfusion.com/aspnet-core/grid/summary#custom-summary  

https://help.syncfusion.com/api/js/ejgrid#members:summaryrows-summarycolumns-customsummaryvalue  

https://help.syncfusion.com/api/js/ejgrid#members:summaryrows-summarycolumns-summarytype  

Regards, 

Saravanan A. 

[Gary Whiteside]

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]

Hi Gary,  

Thanks for your update.            

We hope that the provided information helped you. 

Regards, 

Saravanan A.