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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Summary for calculated column

Thread ID:





124151 May 20,2016 12:53 PM UTC May 25,2016 04:53 AM UTC JavaScript 3
Tags: ejGrid
Kéki Richárd
Asked On May 20, 2016 12:53 PM UTC


I have an ejGrid in AngularJS and I want to create a summary for a calculated column, but I don't know how can I do that.

Could you help me?

Thank you for any help you provide,

Balaji Marimuthu [Syncfusion]
Replied On May 23, 2016 10:21 AM UTC

Hi Richard, 
Thanks for contacting Syncfusion support. 
The summary is calculated based on the Grid dataSource values. In Grid dataSource the value of “CalcField” to all the records are zero (value is “0”), Hence the summary will be return zero. Refer to the modified sample as below. 
Modified JsPlayground Sample: http://jsplayground.syncfusion.com/ebxrmzai 
var obj = [ 
          { "CalcField": 0, "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "Title": "Sales Representative", "City": "Seattle", "Country": "USA" }, 
                 { "CalcField": 0, "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" }, 
                 { "CalcField": 0, "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "Title": "Sales Representative", "City": "Kirkland", "Country": "USA" }, 
                 { "CalcField": 0, "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" }, 
If use the template column in Grid, and change the value of particular column. The changes won’t affect the dataSource, it will be reflect only the Grid columns only. To change the value of particular cell, we suggest you to use the queryCellInfo client side event and refer to the code example as below. 
<div id="Grid" ej-grid e-datasource="data" e-allowsorting="true" e-allowpaging="true" 
                     e-showsummary="true" e-summaryrows="summaryRows" e-querycellinfo="querycell"> 
                    <div e-toolbarsetting-showtoolbar=true> 
                    <div e-columns> 
                        <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div> 
                        <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div> 
                        <div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div> 
                        <div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div> 
                        <div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div> 
                        <div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div> 
                        <div e-column e-field="CalcField" e-headertext="Calculated field" 
                             e-textalign="left" e-width="90"></div> 
$scope.querycell = function (args) { 
                if (args.column.field == "CalcField") { 
                    args.data["CalcField"] = args.data["EmployeeID"] * 30 - args.data["EmployeeID"]; //set the datasource value 
                    $(args.cell).html(args.data["CalcField"]);  //set the element values 
1.Custom Summary: 
To use Custom Summary in Grid, please set the summaryType as “ej.Grid.SummaryType.Custom”. 
$scope.summaryRows = [{ 
                title: 'Summary', 
                summaryColumns: [ 
                    summaryType: ej.Grid.SummaryType.Sum, 
                    dataMember: 'CalcField', 
                    displayColumn: "CalcField", 
                    format: "{0:C0}" 
                      summaryType: ej.Grid.SummaryType.Custom, 
                      customSummaryValue: $scope.fnc, 
                      displayColumn: "Country", 
                      format: "{0:C0}" 
2. Refresh Content: 
The Basic Summary (ej.Grid.SummaryType.Sum) is calculated by using the Grid DataSource values and the summary rows were rendered before the data changes(queryCellInfo event). So, Use refreshContent method, to refresh the Summary rows in Grid. 
Help Documents: 
<div id="Grid" ej-grid e-datasource="data" e-allowsorting="true" e-allowpaging="true" 
                     e-showsummary="true" e-summaryrows="summaryRows" e-querycellinfo="querycell" e-databound="databound"> 
                    <div e-toolbarsetting-showtoolbar=true> 
                       . . .  
$scope.databound = function (args) { 
                this.initialRender = false; // use this code when using the version & no need this line for latest version 
                this.refreshContent();  //refresh the Grid contents 
Balaji Marimuthu  

Kéki Richárd
Replied On May 24, 2016 07:42 AM UTC


Thank you for the solution, it works well.


Balaji Marimuthu [Syncfusion]
Replied On May 25, 2016 04:53 AM UTC

Hi Richard,  
Thanks for the update. 
We are happy to hear that the provided solution helped you. Please get back to us if you need any further assistance. 
Balaji Marimuthu 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon