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.

Custom Group Summary Computed from Other Group Column Summary

Thread ID:

Created:

Updated:

Platform:

Replies:

132050 Aug 9,2017 06:17 PM Aug 14,2017 11:30 PM JavaScript 7
loading
Tags: ejGrid
Bruce Van Horn
Asked On August 9, 2017 06:17 PM

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.

Bruce Van Horn
Replied On August 10, 2017 11:03 AM

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



Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 10, 2017 01:09 PM

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. 


Bruce Van Horn
Replied On August 10, 2017 03:59 PM

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

Bruce Van Horn
Replied On August 10, 2017 04:02 PM

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!


Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 14, 2017 06:48 AM

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. 


Bruce Van Horn
Replied On August 14, 2017 04:39 PM

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 14, 2017 11:30 PM

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.                         


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.

;