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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Summary for calculated column

Thread ID:

Created:

Updated:

Platform:

Replies:

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

Hi,

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,
Regards,
Richard

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> 
                    <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> 
 
                    </div> 
                </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> 
 
                    </div> 
                       . . .  
                 </div> 
 
 
$scope.databound = function (args) { 
                this.initialRender = false; // use this code when using the 13.2.0.29 version & no need this line for latest version 
                this.refreshContent();  //refresh the Grid contents 
            }; 
 
Regards, 
Balaji Marimuthu  
 


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

Hi,

Thank you for the solution, it works well.

Regards,
Richard

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. 
 
Regards, 
Balaji Marimuthu 


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.

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

;