Merge duplicate cells in specific column and export in EJ2 JavaScript Grid control
13 Apr 202312 minutes to read
You can merge the duplicate cells (based on the value) for the particular column of Grid by using ‘dataBound’ event. At the same time, you can also merge the duplicate cells for particular column while exporting by using the excelQueryCellInfo event for Excel/CSV and pdfQueryCellInfo event for PDF exporting.
In the below demo, the duplicate cells are merged for the OrderID column in Grid view and its exporting.
ej.grids.Grid.Inject(ej.grids.RowDD, ej.grids.Toolbar, ej.grids.Export, ej.grids.ExcelExport, ej.grids.PdfExport);
// global variable declaration for excel export
var gridcells: ExcelCell ;
var ValOfOrderID:Number =null;
var i=1;
// global variable declaration for pdf Export
var pdfGridcell: PdfGridCell;
var ValOfOrderID_PDF :Number = null;
var pdfCellindex:Number =1;
var grid = new ej.grids.Grid({
dataSource: data,
dataBound: onDataBound,
toolbarClick: toolbarClick,
excelQueryCellInfo:excelQueryCellInfo,
excelExportComplete: excelExportComplete,
pdfQueryCellInfo: pdfQueryCellInfo,
pdfExportComplete: pdfExportComplete,
toolbar:["ExcelExport","PdfExport"],
allowExcelExport:true,
allowPdfExport:true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'City', headerText: 'Ship City', width: 100 },
],
height: 315,
});
grid.appendTo('#Grid');
function toolbarClick(args){
if (args.item.text === 'PDF Export') {
this.pdfExport();
}
if (args.item.text === 'Excel Export') {
this.excelExport();
}
}
function onDataBound(args: any) {
var previousData: string = null;
var stRowIndex: number = null;
var endRowIndex: number = null;
var grid = this;
var rows = this.getRows();
var data = this.getCurrentViewRecords();
for (var i = 0, len = rows.length; i < len; i++) {
if (!previousData) {
previousData = data[i]['OrderID'];
stRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"));
}
else if (previousData === data[i]['OrderID']) {
rows[i].children[0].classList.add('e-hide');
}
else if (previousData && previousData !== data[i]['OrderID']) {
if (grid.getRows().length > 0 && grid.getRows().length > stRowIndex) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
var targetCell: Element[] =
[].slice.call(grid.getRows()[stRowIndex].querySelectorAll('.e-rowcell')).filter((cell: Element) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(rows[i].children[0].getAttribute('aria-colindex')));
(targetCell[0] as any).setAttribute("rowSpan", endRowIndex - stRowIndex);
previousData = data[i]['OrderID'];
stRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
}
}
if (rows[i].children[0].classList.contains("e-hide") || i < len) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
if (endRowIndex > 0) {
var targetCell: Element[] = [].slice.call(grid.getRows()[stRowIndex].querySelectorAll('.e-rowcell')).filter((cell: Element) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(rows[i].children[0].getAttribute('aria-colindex')));
(targetCell[0] as any).setAttribute("rowSpan", endRowIndex + 1);
}
}
}
}
function excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs) {
if (!ValOfOrderID && args.column.field == "OrderID") {
ValOfOrderID = args.data["OrderID"];
gridcells = (args.cell as ExcelCell);
}
else if (ValOfOrderID && args.column.field == "OrderID" && ValOfOrderID == args.data["OrderID"]) {
i++;
} else if (ValOfOrderID !== args.data["OrderID"] && args.column.field == "OrderID") {
(gridcells as ExcelCell).rowSpan = i;
ValOfOrderID = args.data["OrderID"];
gridcells = (args.cell as ExcelCell);
i = 1;
}
}
// Reset the excel export global variable values
function excelExportComplete(args: ExcelExportCompleteArgs){
ValOfOrderID = null;
gridcells = null;
i=1;
}
function pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs){
if(!ValOfOrderID_PDF && args.column.field == "OrderID"){
ValOfOrderID_PDF = args.data["OrderID"];
pdfGridcell = (args.cell as PdfGridCell);
}
else if(ValOfOrderID_PDF && args.column.field == "OrderID" && ValOfOrderID_PDF ==args.data["OrderID"]){
(pdfCellindex as any)++;
} else if(ValOfOrderID_PDF !== args.data["OrderID"] && args.column.field == "OrderID") {
(pdfGridcell as PdfGridCell).rowSpan = pdfCellindex as any;
ValOfOrderID_PDF = args.data["OrderID"];
pdfGridcell=(args.cell as PdfGridCell);
pdfCellindex = 1 ;
}
}
// Reset the pdf export global variable values
function pdfExportComplete(args: PdfExportCompleteArgs){
ValOfOrderID_PDF=null;
pdfGridcell=null;
pdfCellindex =1;
}<!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/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/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>