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.

Summary for calculated column

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 06:21 AM

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 03:42 AM

Hi,

Thank you for the solution, it works well.

Regards,
Richard

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

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.

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.

;