Aggregate values are displayed in the footer, group footer, or group caption of the Grid. It can be configured through aggregates
property.
Field
and type
are the minimum properties required to represent an aggregate column.
To use the aggregate feature, you have to inject the Aggregate
module.
By default, the aggregate value can be displayed in the footer, group, and caption cells. To show the aggregate value in one of the cells, use the footerTemplate
,
groupFooterTemplate
, or groupCaptionTemplate
property.
The aggregate type should be specified in the type
property to configure an aggregate column.
The built-in aggregates are,
- Multiple aggregates can be used for an aggregate column by setting the
type
property with an array of aggregate types.- Multiple types for a column is supported only when one of the aggregate templates is used.
Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the footerTemplate
property to render the aggregate value in footer cells.
import { Grid, Aggregate } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate);
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
height: 210,
aggregates: [{
columns: [{
type: 'Sum',
field: 'Freight',
footerTemplate: 'Sum: ${Sum}'
}]
},
{
columns: [{
type: 'Max',
field: 'Freight',
footerTemplate: 'Max: ${Max}'
}]
}]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>
The aggregate values must be accessed inside the template using their corresponding
type
name.
You can format the aggregate value result by using the format
property.
import { Grid, Aggregate } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate);
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd' },
{ field: 'Freight', headerText: 'Freight', width: 150, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 230,
aggregates: [{
columns: [{
type: 'Sum',
field: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}'
}]
},
{
columns: [{
type: 'Max',
field: 'Freight',
format: 'C2',
footerTemplate: 'Max: ${Max}'
}]
}]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>
Group and caption aggregate values are calculated from the current group items.
If groupFooterTemplate
is provided, the aggregate values are displayed in the group footer cells; and if groupCaptionTemplate
is provided, aggregate values are displayed in the group caption cells.
import { Grid, Group, Aggregate } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Group, Aggregate);
let grid: Grid = new Grid({
dataSource: data,
allowGrouping: true,
groupSettings: { showDropArea: false, columns: ['ShipCountry'] },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd' },
{ field: 'Freight', headerText: 'Freight', width: 150, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 290,
aggregates: [{
columns: [{
type: 'Sum',
field: 'Freight',
format: 'C2',
groupFooterTemplate: 'Sum: ${Sum}'
}]
},
{
columns: [{
type: 'Max',
field: 'Freight',
format: 'C2',
groupCaptionTemplate: 'Max: ${Max}'
}]
}]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>
The aggregate values must be accessed inside the template using their corresponding
type
name.
To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the type
as Custom
, and provide the custom aggregate function in the customAggregate
property.
The custom aggregate function will be invoked with different arguments for total and group aggregations.
AggregateColumn
object.AggregateColumn
object.import { Grid, Aggregate } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate);
let customAggregateFn = (data: Object) => data.result.filter((item: Object) => item['ShipCountry'] === 'Brazil').length;
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Name', width: 150 }
],
height: 268,
aggregates: [{
columns: [{
type: 'Custom',
customAggregate: customAggregateFn,
columnName: 'ShipCountry',
footerTemplate: 'Brazil Count: ${Custom}'
}]
}]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>
To access the custom aggregate value inside the template, use the key as
Custom
.
When using batch editing, the aggregate values will be refreshed on every cell save. The footer, group footer, and group caption aggregate values will be refreshed.
Adding a new record to the grouped grid will not refresh the aggregate values.
import { Grid, Aggregate, Edit, Toolbar, Group,Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate, Edit, Toolbar, Group, Page);
let grid: Grid = new Grid({
dataSource: data,
allowPaging:true,
pageSettings:{pageSize:6},
toolbar: ['Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowDeleting: true, mode: 'Batch' },
allowGrouping: true,
groupSettings: { showDropArea: false, columns: ['ShipCountry'] },
columns: [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey:true, textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Name', width: 150 }
],
height: 268,
aggregates: [{
columns: [{
type:'Sum',
field:'Freight',
format:'C2',
footerTemplate:'Sum : ${Sum}'
}]
},
{
columns:[{
type:'Sum',
field:'Freight',
format:'C2',
groupCaptionTemplate:'Average : ${Average}'
}]
},
{
columns:[{
type:'Sum',
field:'Freight',
format:'C2',
groupFooterTemplate:'Sum : ${Sum}'
}]
}
]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>
By default, reactive aggregate update is not supported by inline and dialog edit modes as it is not feasible to anticipate the value change event for every editor. But, you can refresh the aggregates manually in the inline edit mode using the refresh method of aggregate module.
In the following code, the input event for the Freight column editor has been registered and the aggregate value has been refreshed manually.
import { Grid, Aggregate, Edit, Toolbar, Group, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Aggregate, Edit, Toolbar, Group, Page);
let selectedRecord : Object = {};
let grid: Grid = new Grid({
dataSource: data,
allowPaging:true,
pageSettings:{pageSize:7},
toolbar: ['Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowDeleting: true, mode: 'Normal' },
actionBegin:(args:any)=>{
if(args.requestType === 'beginEdit'){
selectedRecord ={};
selectedRecord = args.rowData;
};
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey:true, textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', editType: 'numericedit', format: 'C2', edit: { params: { change: (args :any) => {
let gridObj = document.getElementById('Grid')['ej2_instances'][0];
selectedRecord['Freight'] = args.value; // Set the edited value to aggregate column
gridObj.aggregateModule.refresh(selectedRecord) // Refresh aggregates using edited data
}
}
}, width: 150},
{ field: 'ShipCountry', headerText: 'Ship Name', width: 150 }
],
height: 268,
aggregates: [{
columns:[{
type:'Sum',
field:'Freight',
format:'C2',
footerTemplate:'Sum : ${Sum}'
}]
}]
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
<div id='toolbar-template'>
<div id='refresh' title='Refresh'>
<button class='e-btn e-flat'>
<span class= 'e-btn-icon e-icons e-refresh'></span>
</button>
</div>
</div>
</div>
</body>
</html>