Custom aggregate with exporting in EJ2 JavaScript Grid control

13 Apr 20235 minutes to read
The following example shows how to export the grid with custom aggregate.
index.js
index.html
ej.grids.Grid.Inject( ej.grids.Aggregate, ej.grids.PdfExport, ej.grids.ExcelExport, ej.grids.Toolbar);

var grid = new ej.grids.Grid({
  dataSource: data,
  allowExcelExport: true,
  allowPdfExport: true,
  toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],
  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');

grid.toolbarClick = (args) => {
  if (args.item.id === 'Grid_pdfexport') {
    grid.pdfExport();
  }
  if (args.item.id === 'Grid_excelexport') {
    grid.excelExport();
  }
  if (args.item.id === 'Grid_csvexport') {
    grid.csvExport();
  }
}

function customAggregateFn(data) {
  if (data.result)
    return data.result.filter(item => item['ShipCountry'] === 'Brazil').length;
  else {
    return data.filter(item => item['ShipCountry'] === 'Brazil').length;
  }
}
<!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/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">

    
    
    <style>
        .e-row[aria-selected="true"] .e-customizedExpandcell {
            background-color: #e0e0e0;
        }
        .e-grid.e-gridhover tr[role='row']:hover {
            background-color: #eee;
        }
        .e-expand::before {
        content: '\e5b8';
    }
    .empImage {
        margin: 6px 16px;
        float: left;
        width: 50px;
        height: 50px;
    }
    </style>
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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="Grid"></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>