Introduction In certain reporting scenarios using Syncfusion’s Vue Pivot Table, users may wish to display average values instead of sum for a specific value field (like “Amount”) at subtotal levels, such as the country level, within the Syncfusion Vue Pivot Table component. While the Pivot Table currently does not offer a built-in feature to assign different aggregation types to the same value field based on hierarchy levels—for example, using sum for child-level members, and applying average only at the subtotal and grand total levels, this requirement can be fulfilled using the aggregateCellInfo event. This article explains two approaches to customizing subtotal values for a value field using the aggregateCellInfo event. Solution 1: Using args.cellSets.length to Compute Average In this approach, we calculate the average of the “Amount” field for subtotal rows (“e.g., country level”) by dividing the sum by the number of underlying raw data entries, which are accessible via args.cellSets. Implementation [App.js] <ejs-pivotview :aggregateCellInfo="aggregateCellInfo"> </ejs-pivotview> <script lang="ts"> export default { methods: { aggregateCellInfo(args) { if ( args.fieldName === 'Amount' && args.row.hasChild && args.row.level == 0 ) { args.value = args.value / args.cellSets.length; console.log(args.value); } }, }, }; </script> Explanation The provided implementation customizes the behavior of the Syncfusion’s Vue Pivot Table by modifying the aggregation for the “Amount” field at the country-level subtotal using aggregateCellInfo event. It checks if the current row is a subtotal for the “Amount” field, and if so, it calculates the average value by dividing the total value by the number of raw records. This average is then displayed in place of the default sum, providing a more meaningful representation of the data at the subtotal level. Screenshot Before: After: For a practical demonstration, refer to the sample of stackblitz. Solution 2: Using args.row.members.length to Compute Average by Child Count In this method, you calculate the average by dividing the subtotal value by the number of its direct child members instead of raw records. Implementation [App.js] <ejs-pivotview :aggregateCellInfo="aggregateCellInfo"> </ejs-pivotview> <script lang="ts"> export default { methods: { aggregateCellInfo(args) { if (args.fieldName === 'Amount' && args.row.hasChild && args.row.level == 0) { args.value = args.value / args.row.members.length; console.log(args.value); } }, }, }; </script> Explanation In this implementation, the aggregateCellInfo event is used to override the default aggregation behavior for the “Amount” field in the Syncfusion Vue Pivot Table. When the current row represents a subtotal at the country level (identified by “hasChild” and level == 0), the code calculates the average by dividing the subtotal value by the number of its direct child members (args.row.members.length). This displays the average value instead of the sum for the “Amount” field at that subtotal level. Screenshot Before: After: For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you found this article helpful in understanding how to display average values instead of sum for the “Amount” field at the subtotal (country) level using the aggregateCellInfo event in the Syncfusion Vue Pivot Table. You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This Knowledge base explains how to show the calculated value of children only in parent row without using Aggregates in Tree Grid. Solution In Tree Grid, we need to use Aggregates functionality to calculate and display aggregate value of records. It will be shown in the footer template of Tree Grid by default. We can also display calculated value of children in parent row with the help of valueAccessor property of columns without using Aggregates. Customization The valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using valueAccessor. For showing the calculated value of child records in parent row, we need to check whether the current record has children by using the property “hasChildRecords”. If it has children, we need to manipulate those children’s value and return the final calculated value. Then set it as parent’s value. JS import { TreeGrid } from "@syncfusion/ej2-treegrid"; import { summaryRowData } from "./data-source"; import { isNullOrUndefined } from "@syncfusion/ej2-base"; let treegrid: TreeGrid = new TreeGrid({ dataSource: summaryRowData, childMapping: "children", treeColumnIndex: 0, height: 400, columns: [ { field: "FreightID", headerText: "Freight ID", width: 130 }, { field: "FreightName", width: 195, headerText: "Freight Name" }, { field: "UnitWeight", headerText: "Customized Weight Per Unit using value accessor", type: "number", valueAccessor: totalChildValue, clipMode: "EllipsisWithTooltip", width: 130, textAlign: "Right" }, { field: "TotalUnits", headerText: "Total Units", type: "number", width: 125, textAlign: "Right" } ] }); treegrid.appendTo("#TreeGrid"); function totalChildValue(field, data, column) { if (!isNullOrUndefined(data.hasChildRecords)) { //checking if the record has children let totalUnitWeight = 0; data.children.map(row => (totalUnitWeight += row["UnitWeight"])); return totalUnitWeight; } return data.UnitWeight; } Figure 1 show calculated child value in parent record JavaScriptDemo Also refer the other frameworks demo links below, AngularDemo ReactDemo VueDemo
Usually, remote data handlers like WebAPIAdaptor, return only the current page records which is the default behavior. So, we can summarize the current page records only in the Grid Summary Footer. The concept behind this adaptor brings the records on demand which means client-end receives only the current page records. Based on the received records only this adaptor summarizes the aggregates and displays them in Grid. If we return whole records to the client-end, concept of the load on demand will be declined. Henceforth, based on the current page records the summary were displayed. However, we can overcome this behavior using the custom adaptors and custom headers of the DataManager. Using the custom headers, required aggregate fields were shared to the server-end. Based on that selective fields with their records were returned to the client as aggregates along with the Items/count which will display the summary for total records. HTML: <div id="Grid"></div> JavaScript: <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: new ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }), allowPaging: true, showSummary: true, summaryRows: [ { title: "Sum", summaryColumns: [ { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" } ] } ], load: "onLoad", actionBegin: "onActionBegin", columns: [ { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right }, { field: "CustomerID", headerText: "Customer ID" }, { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right }, { field: "Freight", format: "{0:C3}", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City" } ] }); }); </script> Razor: @(Html.EJ().Grid<object>("Grid") .AllowPaging() .Datasource(ds => { ds.URL("/api/Orders"); ds.Adaptor(AdaptorType.WebApiAdaptor); }) .ShowSummary() .SummaryRow(row => { row.Title("Sum") .SummaryColumns(col => { col.SummaryType(SummaryType.Sum) .Format("{0:C3}") .DisplayColumn("Freight") .DataMember("Freight").Add(); }).Add(); }) .ClientSideEvents(events => { events.ActionBegin("onActionBegin"); events.Load("onLoad"); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer ID").Add(); col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add(); col.Field("Freight").Format("{0:C3}").TextAlign(TextAlign.Right).Add(); col.Field("ShipCity").HeaderText("Ship City").Add(); }) ) WebForms: <ej:Grid id="Grid" runat="server" ShowSummary="true" Allowpaging="true"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" /> <ej:Column Field="Freight" Format ="{0:C3}" TextAlign="Right"/> <ej:Column Field="ShipCity" HeaderText="Ship City"/> </Columns> <SummaryRows> <ej:SummaryRow Title="Sum"> <SummaryColumn> <ej:SummaryColumn SummaryType="Sum" Format="{0:C3}" DisplayColumn="Freight" DataMember="Freight" /> </SummaryColumn> </ej:SummaryRow> </SummaryRows> <ClientSideEvents Load="onLoad" ActionBegin="onActionBegin" /> </ej:Grid> .Net Core <ej-grid id="Grid" allow-paging="true" load="onLoad" show-summary="true" action-begin="onActionBegin"> <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor" /> <e-summary-rows> <e-summary-row title="Sum"> <e-summary-columns> <e-summary-column summary-type="Sum" format="{0:C3}" display-column="Freight" datamember="Freight" /> </e-summary-columns> </e-summary-row> </e-summary-rows> <e-columns> <e-column field="OrderID" header-text="Order ID" is-primary-key="true" text-align="Right"></e-column> <e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column> <e-column field="CustomerID" header-text="Customer ID"></e-column> <e-column field="Freight" text-align="Right" format="{0:C3}"></e-column> <e-column field="ShipCity" header-text="Ship City"> </e-column> </e-columns> </ej-grid> Angular2: <ej-grid id="Grid" #grid [allowPaging]="true" [showSummary]="true" [summaryRows]="summaryrows" [dataSource]="datasrc" (load)="onLoad($event)" (actionBegin)="onActionBegin($event)"> <e-columns> <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID"></e-column> <e-column field="EmployeeID" headerText="Employee Name" textAlign="right"></e-column> <e-column field="Freight" format="{0:C3}" textAlign="right"></e-column> <e-column field="ShipCity" headerText="Ship City"></e-column> </e-columns> </ej-grid> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.datasrc = new ej.DataManager({ url: "/api/Values", adaptor: new ej.WebApiAdaptor() }) this.summaryrows = [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" }] }] } public datasrc: any; public summaryrows: any; } Define the Load and ActionBegin events of the Grid along with the customAdaptor. In the Load event, assign the newly extended adaptor to the Grid’s dataSource. In the ActionBegin event, lookup the model.query for aggregates and push them to the custom headers of the dataSource, an ej.DataManager instance. <script> var customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData;; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej.aggregates[agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); function onLoad(args) { this.model.dataSource.adaptor = new customAdaptor(); } function onActionBegin(args) { var rows = this.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } this.model.dataSource.dataSource.headers = []; this.model.dataSource.dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } </script> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej["aggregates"][agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); } public customAdaptor: any; onLoad(args) { args.model.dataSource().adaptor = new this.customAdaptor; } onActionBegin(args) { var rows = args.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } args.model.dataSource().dataSource.headers = []; args.model.dataSource().dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } } In the server-end, retrieve the pushed aggregated values and deserialize them to List<string>. Use the deserialized object as input for DataOperations for selecting the aggregate columns. Later, return them to the client-end along with the Items/Count wrapped object. Web API Controller: public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { var queryString = HttpContext.Current.Request.QueryString; string agg = Request.Headers.GetValues("aggregates").ToList()[0]; int skip = Convert.ToInt32(queryString["$skip"]); int take = Convert.ToInt32(queryString["$top"]); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Asp.Net core WebApi controller public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { string agg = Request.Headers["aggregates"].ToString(); int skip = Convert.ToInt32(Request.Query.ToList()[1].Value.ToString()); int take = Convert.ToInt32(Request.Query.ToList()[2].Value.ToString()); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); List<string> str = new List<string>(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Note: To avoid the serialization error only, WebApiAdaptor is prevented the default aggregate records returning from server-end. But this KB, proposed a way to generate aggregate for total records. It may lead to the serialization error in the case larger record count. Figure. Grid with summation of total records for Freight Column.ConclusionI hope you enjoyed learning about how to get aggregate WebApiAdaptor enabled in ASP.NET MVC Grid.You can refer to our ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Usually, remote data handlers like WebAPIAdaptor, return only the current page records which is the default behavior. So, we can summarize the current page records only in the Grid Summary Footer. The concept behind this adaptor brings the records on demand which means client-end receives only the current page records. Based on the received records only this adaptor summarizes the aggregates and displays them in Grid. If we return whole records to the client-end, concept of the load on demand will be declined. Henceforth, based on the current page records the summary were displayed. However, we can overcome this behavior using the custom adaptors and custom headers of the DataManager. Using the custom headers, required aggregate fields were shared to the server-end. Based on that selective fields with their records were returned to the client as aggregates along with the Items/count which will display the summary for total records. HTML: <div id="Grid"></div> JavaScript: <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: new ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }), allowPaging: true, showSummary: true, summaryRows: [ { title: "Sum", summaryColumns: [ { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" } ] } ], load: "onLoad", actionBegin: "onActionBegin", columns: [ { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right }, { field: "CustomerID", headerText: "Customer ID" }, { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right }, { field: "Freight", format: "{0:C3}", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City" } ] }); }); </script> Razor: @(Html.EJ().Grid<object>("Grid") .AllowPaging() .Datasource(ds => { ds.URL("/api/Orders"); ds.Adaptor(AdaptorType.WebApiAdaptor); }) .ShowSummary() .SummaryRow(row => { row.Title("Sum") .SummaryColumns(col => { col.SummaryType(SummaryType.Sum) .Format("{0:C3}") .DisplayColumn("Freight") .DataMember("Freight").Add(); }).Add(); }) .ClientSideEvents(events => { events.ActionBegin("onActionBegin"); events.Load("onLoad"); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer ID").Add(); col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add(); col.Field("Freight").Format("{0:C3}").TextAlign(TextAlign.Right).Add(); col.Field("ShipCity").HeaderText("Ship City").Add(); }) ) WebForms: <ej:Grid id="Grid" runat="server" ShowSummary="true" Allowpaging="true"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" /> <ej:Column Field="Freight" Format ="{0:C3}" TextAlign="Right"/> <ej:Column Field="ShipCity" HeaderText="Ship City"/> </Columns> <SummaryRows> <ej:SummaryRow Title="Sum"> <SummaryColumn> <ej:SummaryColumn SummaryType="Sum" Format="{0:C3}" DisplayColumn="Freight" DataMember="Freight" /> </SummaryColumn> </ej:SummaryRow> </SummaryRows> <ClientSideEvents Load="onLoad" ActionBegin="onActionBegin" /> </ej:Grid> .Net Core <ej-grid id="Grid" allow-paging="true" load="onLoad" show-summary="true" action-begin="onActionBegin"> <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor" /> <e-summary-rows> <e-summary-row title="Sum"> <e-summary-columns> <e-summary-column summary-type="Sum" format="{0:C3}" display-column="Freight" datamember="Freight" /> </e-summary-columns> </e-summary-row> </e-summary-rows> <e-columns> <e-column field="OrderID" header-text="Order ID" is-primary-key="true" text-align="Right"></e-column> <e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column> <e-column field="CustomerID" header-text="Customer ID"></e-column> <e-column field="Freight" text-align="Right" format="{0:C3}"></e-column> <e-column field="ShipCity" header-text="Ship City"> </e-column> </e-columns> </ej-grid> Angular2: <ej-grid id="Grid" #grid [allowPaging]="true" [showSummary]="true" [summaryRows]="summaryrows" [dataSource]="datasrc" (load)="onLoad($event)" (actionBegin)="onActionBegin($event)"> <e-columns> <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID"></e-column> <e-column field="EmployeeID" headerText="Employee Name" textAlign="right"></e-column> <e-column field="Freight" format="{0:C3}" textAlign="right"></e-column> <e-column field="ShipCity" headerText="Ship City"></e-column> </e-columns> </ej-grid> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.datasrc = new ej.DataManager({ url: "/api/Values", adaptor: new ej.WebApiAdaptor() }) this.summaryrows = [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" }] }] } public datasrc: any; public summaryrows: any; } Define the Load and ActionBegin events of the Grid along with the customAdaptor. In the Load event, assign the newly extended adaptor to the Grid’s dataSource. In the ActionBegin event, lookup the model.query for aggregates and push them to the custom headers of the dataSource, an ej.DataManager instance. <script> var customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData;; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej.aggregates[agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); function onLoad(args) { this.model.dataSource.adaptor = new customAdaptor(); } function onActionBegin(args) { var rows = this.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } this.model.dataSource.dataSource.headers = []; this.model.dataSource.dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } </script> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej["aggregates"][agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); } public customAdaptor: any; onLoad(args) { args.model.dataSource().adaptor = new this.customAdaptor; } onActionBegin(args) { var rows = args.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } args.model.dataSource().dataSource.headers = []; args.model.dataSource().dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } } In the server-end, retrieve the pushed aggregated values and deserialize them to List<string>. Use the deserialized object as input for DataOperations for selecting the aggregate columns. Later, return them to the client-end along with the Items/Count wrapped object. Web API Controller: public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { var queryString = HttpContext.Current.Request.QueryString; string agg = Request.Headers.GetValues("aggregates").ToList()[0]; int skip = Convert.ToInt32(queryString["$skip"]); int take = Convert.ToInt32(queryString["$top"]); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Asp.Net core WebApi controller public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { string agg = Request.Headers["aggregates"].ToString(); int skip = Convert.ToInt32(Request.Query.ToList()[1].Value.ToString()); int take = Convert.ToInt32(Request.Query.ToList()[2].Value.ToString()); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); List<string> str = new List<string>(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Note: To avoid the serialization error only, WebApiAdaptor is prevented the default aggregate records returning from server-end. But this KB, proposed a way to generate aggregate for total records. It may lead to the serialization error in the case larger record count. Figure. Grid with summation of total records for Freight Column.Note:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Usually, remote data handlers like WebAPIAdaptor, return only the current page records which is the default behavior. So, we can summarize the current page records only in the Grid Summary Footer. The concept behind this adaptor brings the records on demand which means client-end receives only the current page records. Based on the received records only this adaptor summarizes the aggregates and displays them in Grid. If we return whole records to the client-end, concept of the load on demand will be declined. Henceforth, based on the current page records the summary were displayed. However, we can overcome this behavior using the custom adaptors and custom headers of the DataManager. Using the custom headers, required aggregate fields were shared to the server-end. Based on that selective fields with their records were returned to the client as aggregates along with the Items/count which will display the summary for total records. HTML: <div id="Grid"></div> JavaScript: <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: new ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }), allowPaging: true, showSummary: true, summaryRows: [ { title: "Sum", summaryColumns: [ { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" } ] } ], load: "onLoad", actionBegin: "onActionBegin", columns: [ { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right }, { field: "CustomerID", headerText: "Customer ID" }, { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right }, { field: "Freight", format: "{0:C3}", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City" } ] }); }); </script> Razor: @(Html.EJ().Grid<object>("Grid") .AllowPaging() .Datasource(ds => { ds.URL("/api/Orders"); ds.Adaptor(AdaptorType.WebApiAdaptor); }) .ShowSummary() .SummaryRow(row => { row.Title("Sum") .SummaryColumns(col => { col.SummaryType(SummaryType.Sum) .Format("{0:C3}") .DisplayColumn("Freight") .DataMember("Freight").Add(); }).Add(); }) .ClientSideEvents(events => { events.ActionBegin("onActionBegin"); events.Load("onLoad"); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer ID").Add(); col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add(); col.Field("Freight").Format("{0:C3}").TextAlign(TextAlign.Right).Add(); col.Field("ShipCity").HeaderText("Ship City").Add(); }) ) WebForms: <ej:Grid id="Grid" runat="server" ShowSummary="true" Allowpaging="true"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" /> <ej:Column Field="Freight" Format ="{0:C3}" TextAlign="Right"/> <ej:Column Field="ShipCity" HeaderText="Ship City"/> </Columns> <SummaryRows> <ej:SummaryRow Title="Sum"> <SummaryColumn> <ej:SummaryColumn SummaryType="Sum" Format="{0:C3}" DisplayColumn="Freight" DataMember="Freight" /> </SummaryColumn> </ej:SummaryRow> </SummaryRows> <ClientSideEvents Load="onLoad" ActionBegin="onActionBegin" /> </ej:Grid> .Net Core <ej-grid id="Grid" allow-paging="true" load="onLoad" show-summary="true" action-begin="onActionBegin"> <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor" /> <e-summary-rows> <e-summary-row title="Sum"> <e-summary-columns> <e-summary-column summary-type="Sum" format="{0:C3}" display-column="Freight" datamember="Freight" /> </e-summary-columns> </e-summary-row> </e-summary-rows> <e-columns> <e-column field="OrderID" header-text="Order ID" is-primary-key="true" text-align="Right"></e-column> <e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column> <e-column field="CustomerID" header-text="Customer ID"></e-column> <e-column field="Freight" text-align="Right" format="{0:C3}"></e-column> <e-column field="ShipCity" header-text="Ship City"> </e-column> </e-columns> </ej-grid> Angular2: <ej-grid id="Grid" #grid [allowPaging]="true" [showSummary]="true" [summaryRows]="summaryrows" [dataSource]="datasrc" (load)="onLoad($event)" (actionBegin)="onActionBegin($event)"> <e-columns> <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID"></e-column> <e-column field="EmployeeID" headerText="Employee Name" textAlign="right"></e-column> <e-column field="Freight" format="{0:C3}" textAlign="right"></e-column> <e-column field="ShipCity" headerText="Ship City"></e-column> </e-columns> </ej-grid> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.datasrc = new ej.DataManager({ url: "/api/Values", adaptor: new ej.WebApiAdaptor() }) this.summaryrows = [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C3}" }] }] } public datasrc: any; public summaryrows: any; } Define the Load and ActionBegin events of the Grid along with the customAdaptor. In the Load event, assign the newly extended adaptor to the Grid’s dataSource. In the ActionBegin event, lookup the model.query for aggregates and push them to the custom headers of the dataSource, an ej.DataManager instance. <script> var customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData;; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej.aggregates[agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); function onLoad(args) { this.model.dataSource.adaptor = new customAdaptor(); } function onActionBegin(args) { var rows = this.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } this.model.dataSource.dataSource.headers = []; this.model.dataSource.dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } </script> TypeScript: import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core'; import { EJComponents } from "ej-angular2/src/ej/core"; @Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { constructor() { this.customAdaptor = new ej.WebApiAdaptor().extend({ processResponse: function (data, ds, query, xhr, request, changes) { var resultdata = data, pvt = request && request.ejPvtData; var result = this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); if (pvt && pvt.aggregates && pvt.aggregates.length) { var agg = pvt.aggregates, args = {}, fn, res = {}; for (var i = 0; i < agg.length; i++) { fn = ej["aggregates"][agg[i].type]; if (fn) res[agg[i].field + " - " + agg[i].type] = fn(resultdata.aggregate, agg[i].field); } result.aggregates = res; } return result; } }); } public customAdaptor: any; onLoad(args) { args.model.dataSource().adaptor = new this.customAdaptor; } onActionBegin(args) { var rows = args.model.summaryRows, scolumns, sCol = [], aggregate = []; for (var row = 0, rlen = rows.length; row < rlen; row++) { scolumns = rows[row].summaryColumns; for (var col = 0, clen = scolumns.length; col < clen; col++) { aggregate.push(scolumns[col].dataMember); } } args.model.dataSource().dataSource.headers = []; args.model.dataSource().dataSource.headers.push({ aggregates: JSON.stringify(aggregate) }); } } In the server-end, retrieve the pushed aggregated values and deserialize them to List<string>. Use the deserialized object as input for DataOperations for selecting the aggregate columns. Later, return them to the client-end along with the Items/Count wrapped object. Web API Controller: public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { var queryString = HttpContext.Current.Request.QueryString; string agg = Request.Headers.GetValues("aggregates").ToList()[0]; int skip = Convert.ToInt32(queryString["$skip"]); int take = Convert.ToInt32(queryString["$top"]); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Asp.Net core WebApi controller public class OrdersController : ApiController { NorthwindDataContext db = new NorthwindDataContext(); public object Get() { string agg = Request.Headers["aggregates"].ToString(); int skip = Convert.ToInt32(Request.Query.ToList()[1].Value.ToString()); int take = Convert.ToInt32(Request.Query.ToList()[2].Value.ToString()); List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); IEnumerable<OrdersView> order = db.OrdersViews.ToList(); DataOperations ds = new DataOperations(); List<string> str = new List<string>(); IEnumerable aggregate = ds.PerformSelect(order, aggregates); return new { Items = order.Skip(skip).Take(take), Count = order.Count(), aggregate = aggregate }; } } Note: To avoid the serialization error only, WebApiAdaptor is prevented the default aggregate records returning from server-end. But this KB, proposed a way to generate aggregate for total records. It may lead to the serialization error in the case larger record count. Figure. Grid with summation of total records for Freight Column. ConclusionI hope you enjoyed learning about how can I obtain a grid with aggregate WebApiAdaptor enabled?You can refer to our ASP.NET Core Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
