Reactive aggregate in EJ2 TypeScript Grid control
1 Mar 202411 minutes to read
The Syncfusion EJ2 TypeScript Grid control provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the grid.
Auto update aggregate value in batch editing
When the grid is in batch editing mode, the aggregate values in the footer, group footer, and group caption are automatically refreshed every time a cell is saved. This ensures that the aggregate values accurately reflect the edited data.
Here’s an example code snippet demonstrating how to auto update aggregate value in batch editing:
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,
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: "OrderDate", headerText: "OrderDate", width: 120, format: "yMd" },
{ field: "Freight", headerText: "Freight", width: 150, format: "C2",editType:"numericedit" },
{ field: "ShipCountry", headerText: "Ship Country", width: 150 },
{ field: "ShipCity", headerText: "Ship City", width: 150 },
],
height: 268,
aggregates: [{
columns: [{
type:'Sum',
field:'Freight',
format:'C2',
footerTemplate:'Sum : ${Sum}'
}]
},
{
columns:[{
type: 'Average',
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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>Adding a new record to the grouped grid will not refresh the aggregate values.
Refresh aggregate values in inline editing
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, ChangeEventArgs, ActionEventArgs } 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,
toolbar: ['Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowDeleting: true, mode: 'Normal' },
actionBegin:(args: ActionEventArgs)=>{
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: 'OrderDate', headerText: 'OrderDate', width: 120, format: 'yMd' },
{ field: 'Freight', headerText: 'Freight', editType: 'numericedit', format: 'C2', edit: { params: { change: (args :ChangeEventArgs) => {
selectedRecord['Freight'] = args.value; // Set the edited value to aggregate column
grid.aggregateModule.refresh(selectedRecord) // Refresh aggregates using edited data
}
}
}, width: 150},
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', 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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>