Export to PDF - two tables, single pdf page
5 Replies
Hi Petr,
Thanks for the update
Based on your query, we have prepared a sample to achieve exporting multiple Grids to rendered in a single pdf document in a sequence instead of in new pages. Please refer the below sample and code example for more information,
|
<div>Grid1</div>
@Html.EJS().Grid("Grid1").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport().ToolbarClick("toolbarClick").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Format("C2").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Toolbar(new List<string>() { "PdfExport" }).Render()
<div>Grid2</div>
@Html.EJS().Grid("Grid2").DataSource((IEnumerable<object>)ViewBag.DataSource1).AllowPdfExport().Columns(col =>
{
col.Field("UnitID").HeaderText("Unit ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("DnName").HeaderText("Name").Width("125").Add();
col.Field("ShipAddress").HeaderText("Address").Width("170").Add();
}).Render()
<script>
function toolbarClick(args) {
if (args.item.text == "PDF Export") {
customPDF()
}
}
function customPDF() {
// create a new PDF document
let pdfDocument = new ej.pdfexport.PdfDocument();
// add a page
let page = pdfDocument.pages.add();
// set the font
let font = new ej.pdfexport.PdfStandardFont(2, 10);
// create black brush
let brush = new ej.pdfexport.PdfSolidBrush(new ej.pdfexport.PdfColor(0, 0, 0));
var totalGrid = document.getElementsByClassName('e-grid');
for (var g = 0; g < totalGrid.length; g++) {
var gridI = totalGrid[g].ej2_instances[0];
// create a PdfGrid
let pdfGrid = new ej.pdfexport.PdfGrid();
// add columns
var columns = gridI.getColumns();
pdfGrid.columns.add(columns.length);
// add headers
var headers = gridI.columns;
var secondLevelHeader = [];
var firstLevelHeader = [];
for (var s = 0; s < headers.length; s++) {
firstLevelHeader.push(headers[s].headerText)
if (headers[s].columns) {
var stackedHeader = true; // enable the stackedHeader flag variable if the grid have stacked header.
for (var k = 0; k < headers[s].columns.length; k++) {
secondLevelHeader.push(headers[s].columns[k].headerText)
}
}
}
if (stackedHeader) {
pdfGrid.headers.add(2);
} else {
pdfGrid.headers.add(1);
}
var secondLevelHeaderOrder = [];
for (var h = 0; h < pdfGrid.headers.rows.length; h++) {
if (h == 0) {
let pdfGridHeader1 = pdfGrid.headers.getHeader(h);
var firstLevelHeaderOrder = 0;
for (var n = 0; n < firstLevelHeader.length; n++) {
if (headers[n].columns) {
var columnSpanLength = headers[n].columns.length;
let secondLevelHeaderOrderIndex = firstLevelHeaderOrder;
for (var t = 0; t < columnSpanLength; t++) {
secondLevelHeaderOrder.push(secondLevelHeaderOrderIndex + t);
}
pdfGridHeader1.cells.getCell(firstLevelHeaderOrder).value = firstLevelHeader[n];
//Apply column span for first level stacked header
pdfGridHeader1.cells.getCell(firstLevelHeaderOrder).columnSpan = columnSpanLength;
firstLevelHeaderOrder = firstLevelHeaderOrder + columnSpanLength
} else if (stackedHeader) {
pdfGridHeader1.cells.getCell(firstLevelHeaderOrder).value = firstLevelHeader[n];
//Apply row span for first level normal header if grid have stacked header
pdfGridHeader1.cells.getCell(firstLevelHeaderOrder).rowSpan = 2;
firstLevelHeaderOrder = firstLevelHeaderOrder + 1
} else {
pdfGridHeader1.cells.getCell(n).value = firstLevelHeader[n];
}
}
} else {
let pdfGridHeader2 = pdfGrid.headers.getHeader(h);
for (var st = 0; st < secondLevelHeader.length; st++) {
pdfGridHeader2.cells.getCell(secondLevelHeaderOrder[st]).value = secondLevelHeader[st];
}
}
}
stackedHeader = false
// add rows
var data = gridI.dataSource;
for (let i = 0; i < data.length; i++) {
let pdfGridRow = pdfGrid.rows.addRow();
for (let j = 0; j < columns.length; j++) {
var field = columns[j].field;
if (field) {
pdfGridRow.cells.getCell(j).value = data[i][field].toString();
}
}
}
if (g == 0) {
// drawing a grid
var gridResult = pdfGrid.draw(
page,
new ej.pdfexport.PointF(0, 0)
);
} else {
let layoutFormat = new ej.pdfexport.PdfGridLayoutFormat();
layoutFormat.layout = 0; //PdfLayoutType.Paginate;
layoutFormat.break = 0; //PdfLayoutBreakType.FitPage;
// drawing a grid based on PdfGridLayoutResult value
gridResult = pdfGrid.draw(
gridResult.page,
new ej.pdfexport.PointF(0, gridResult.bounds.y + gridResult.bounds.height + 30),
layoutFormat
);
}
}
//Save the document.
pdfDocument.save('MultipleGrid_Result.pdf');
pdfDocument.destroy();
}
</script> |
Screenshot:
Regards,
Rajapandi R
SIGN IN To post a reply.
