Summary for calculated column

[Kéki Richárd]

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.

I started a sample: http://jsplayground.syncfusion.com/n3kxxxcw

Could you help me?

Thank you for any help you provide,

Regards,

Richard

[Balaji Marimuthu]

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. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#events:querycellinfo 

 

 

 

 

<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”. 

 

http://help.syncfusion.com/js/grid/summary#custom-summary 

 

 

$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: 

dataBound event: http://help.syncfusion.com/js/api/ejgrid#events:databound 

refreshContent method: http://help.syncfusion.com/js/api/ejgrid#methods:refreshcontent 

 

 

 

<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]

Hi,

Thank you for the solution, it works well.

Regards,

Richard

[Balaji Marimuthu]

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