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

Custom Group Summary Computed from Other Group Column Summary

I have a grid with some columns you can summarize (just a sum), but I want to offer an additional summary number based on the group totals, say the grouped sum of column A * column B + column C.  I can do this at the row level with queryCellInfo, but I can't figure out how to access the group totals and how I would go about effecting the summary row.  I see the custom summary option, and I understand that, but the example is very simple compared to what I'm after.

7 Replies

BV Bruce Van Horn August 10, 2017 03:03 PM UTC

As I wrote this question I kept having a sense of deja vu.  It turns out a really smart (and good looking) guy already asked this but when I searched the forum it didn't come up.


https://www.syncfusion.com/forums/130441/custom-summary-calc-using-other-summary-values




TS Thavasianand Sankaranarayanan Syncfusion Team August 10, 2017 05:09 PM UTC

Hi Bruce, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query and we suspect that you want to get the row level calculation in Grid.  
 
We suspect that you have got the solution from your second update. if not we suggest you to calculate the columns as “ColumnA * (ColumnB+ColumnC)” and the value get displayed in the “Calculated Column” in Grid by using the column template support in ejGrid control. 
 
Refer the below code example. 
 

$(function () { 
            var data = [{ ColumnA: 1, ColumnB: 33, ColumnC: 20 }, 
 
                        --- 
                       ]; 
 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                allowSorting: true, 
                showSummary: true, 
                summaryRows: [{ 
                    title: "Sum", 
                    summaryColumns: [{ 
                        summaryType: ej.Grid.SummaryType.Sum, 
                        displayColumn: "ColumnC", 
                        dataMember: "ColumnC", 
                    }] 
                }], 
                columns: [ 
                        { field: "ColumnA", headerText: "Column A", width: 75 }, 
                        { field: "ColumnB", headerText: "Column B", width: 80 }, 
                        { field: "ColumnC", headerText: "Column C", width: 75 }, 
                        { headerText: "Calculated Column", template: "<span>{{:ColumnA * (ColumnB + ColumnC) }}</span>", width: 90 } 
                ] 
            }); 
        }); 


Note: We have normally show an summary values for ColumnC in Grid. 

We have prepared a JsPlayground sample in the following link. 


Refer the help documentation. 



If we misunderstood your query then please get back to us with the following details. 

  1. Screen shot or video demonstration or pictorial representation of your requirement in Grid.
  2. Share Grid code example.
  3. Essential Studio version.

Regards, 
Thavasianand S. 



BV Bruce Van Horn August 10, 2017 07:59 PM UTC

Given the below code, how could I set up a custom summary on the summary row that does some math on the group totals from columns A, B, and C?  This time I attached a powerpoint, sample code, and data.  I am so grateful for the support your team provides!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Essential Studio for JavaScript : Edit Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="utf-8" />

    <link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.26/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="15.3.0.26/themes/web/content/default.css" rel="stylesheet" />

    <link rel='nofollow' href="15.3.0.26/themes/web/content/default-responsive.css" rel="stylesheet" />

    <link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.26/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />

    <!--[if lt IE 9]>

    <script src="//cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script> 

    <![endif]-->

    <!--[if gte IE 9]><!-->

    <script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script> 

    <!--<![endif]-->  

    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>

<script src="//cdn.syncfusion.com/js/assets/external/jquery.validate.min.js"></script>

    <script src="//cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js"></script>

    <script src="15.3.0.26/scripts/web/jsondata.min.js"></script>

    <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>

    <script type="text/javascript" src="//cdn.syncfusion.com/15.3.0.26/js/web/ej.web.all.min.js"></script>

    <script src="15.3.0.26/scripts/web/properties.js" type="text/javascript"></script>

</head>

<body>

    <div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <div id="Grid"></div>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        $(function () {

            var data = [{ColumnA:1, ColumnB: 33, ColumnC: 20},{ColumnA:2, ColumnB: 81, ColumnC: 26},

{ColumnA:3, ColumnB: 27, ColumnC: 44},{ColumnA:4, ColumnB: 85, ColumnC: 35},

{ColumnA:5, ColumnB: 81, ColumnC: 56},{ColumnA:6, ColumnB: 99, ColumnC: 44},

{ColumnA:7, ColumnB: 11, ColumnC: 68},{ColumnA:8, ColumnB: 101, ColumnC: 58},

{ColumnA:9, ColumnB: 17, ColumnC: 90},{ColumnA:10, ColumnB: 45, ColumnC: 67}]

            $("#Grid").ejGrid({

                dataSource: data,

                allowSorting: true,

showSummary: true,

      summaryRows: [{

        title: "Sum: ",

          summaryColumns: [

            {

             summaryType: ej.Grid.SummaryType.Sum,

              displayColumn: "ColumnA",

            dataMember: "ColumnA"},

            {

             summaryType: ej.Grid.SummaryType.Sum,

              displayColumn: "ColumnB",

            dataMember: "ColumnB"},{

              summaryType: ej.Grid.SummaryType.Sum,

              displayColumn: "ColumnC",

              dataMember: "ColumnC",

          }]

      }],

                columns: [

                        { field: "ColumnA", headerText: "Column A", width: 75 },

                        { field: "ColumnB", headerText: "Column B", width: 80 },

                        { field: "ColumnC", headerText: "Column C", width: 75 },

                        { headerText: "Calculated Column", template: "<span>{{:ColumnA * (ColumnB + ColumnC) }}</span>", width: 90 }

                ]

            });

        });

    </script>

</body>

</html>



Attachment: CommitmentProblemExplanation_6b5a85e3.zip


BV Bruce Van Horn August 10, 2017 08:02 PM UTC

I love that code sample.  I can use that for other things, but it wasn't quite what I was looking for.  Nevertheless I appreciate the time and energy spent creating it.  Thank you!



TS Thavasianand Sankaranarayanan Syncfusion Team August 14, 2017 10:48 AM UTC

Hi Bruce, 
 
Sorry for the inconvenience caused.  

We have analyzed your query from your given documents. In this you have mention that you have add the ColumnA and ColumnB and compare it with ColumnC’s total then return some values in ColumnC’s custom summary. So, we suspect that you want compare the total values of ColumnA,ColumnB and ColumnC in the Grid Summary rows and need to return a value which satisfies the condition. 

Refer the below code example. 


$(function () { 
            var data =[ 
 
               ---- 
            ] 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                allowSorting: true, 
                showSummary: true, 
                summaryRows: [{ 
                    title: "Sum=", 
                    summaryColumns: [{ 
                         
 
                       --- 
                     { 
 
                        summaryType: ej.Grid.SummaryType.Custom, 
                        displayColumn: "ColumnC", 
                        customSummaryValue: customCommitSummary 
 
                    } 
                    ] 
                }], 
                columns: [ 
                         
                  ---- 
 
               ] 
           }); 
        }); 
        function customCommitSummary(args) { 
 
            var gridObj = $("#Grid").ejGrid('instance'); 
            var ColA = ej.sum(gridObj.model.dataSource, "ColumnA"); //Sum the ColumnA’s value externally 
            var ColB = ej.sum(gridObj.model.dataSource, "ColumnB"); //Sum the ColumnB’s value externally 
 
            var ColC = ej.sum(gridObj.model.dataSource, "ColumnC"); //Sum the ColumnC’s value externally 
 
            if ((ColA + ColB) < ColC) 
 
                return 12345; 
            else 
                return 0; 
        } 


Note: We have return 12345 value when the condition( if( (ColA+ColB) < ColC ) ) gets satisfied. If not we return value as “0” in custom summary value. 

Refer the below screenshot. 
 


We have prepared a simple JsPlayground sample in the following link. 



If we misunderstood your query then please get back to us with the following details. 

  1. Are you expecting the custom summary for any one column while grouping is enabled in Grid ?
  2. Are you need this same solution for custom summary when grouping is enabled ?

Regards, 
Thavasianand S. 



BV Bruce Van Horn August 14, 2017 08:39 PM UTC

No inconvenience was caused.  I'm extremely grateful for your help!



TS Thavasianand Sankaranarayanan Syncfusion Team August 15, 2017 03:30 AM UTC

Hi Bruce, 

We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.                         


Loader.
Live Chat Icon For mobile
Up arrow icon