Aggregates in EJ2 JavaScript Treegrid control
27 Apr 20236 minutes to read
Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. 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 treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the footerTemplate
.
Built-in aggregate types
The aggregate type should be specified in the type
property to configure an aggregate column.
The built-in aggregates are,
- Sum
- Average
- Min
- Max
- Count
- Truecount
- Falsecount
- 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.
Child aggregate
Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the childSummary
property to render the child rows aggregate value.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Aggregate);
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: summaryRowData,
childMapping: 'children',
treeColumnIndex: 0,
height: 260,
columns: [
{ field: 'FreightID', headerText: 'Freight ID', width: 130 },
{ field: 'FreightName', width: 195, headerText: 'Freight Name' },
{ field: 'UnitWeight', headerText: 'Weight Per Unit', type: 'number', width: 130, textAlign: 'Right' },
{ field: 'TotalUnits', headerText: 'Total Units', type: 'number', width: 125, textAlign: 'Right' }
],
aggregates: [{
showChildSummary: true,
columns: [
{
type: 'Max',
field: 'UnitWeight',
columnName: 'UnitWeight',
footerTemplate: 'Maximum: ${Max}'
},
{
type: 'Min',
field: 'TotalUnits',
columnName: 'TotalUnits',
footerTemplate: 'Minimum: ${Min}'
}]
}]
});
treeGridObj.appendTo('#TreeGrid');
<!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/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can refer to our
JavaScript Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid example
to knows how to present and manipulate data.