Export Multiple Grids

16 Oct 20233 minutes to read

The PDF export provides an option to export multiple grids to the same or different pages of a PDF file. Each grid is identified by its unique ID. You can specify which grid to export by listing their IDs in the exportGrids property.

Same page

PDF exporting provides support for exporting multiple grids on the same page. To export the grids on the same page, define multipleExport.type as AppendToPage in exportProperties. It also has an option to provide blank space between the grids. This blank space can be defined by using multipleExport.blankSpace property.

CSHTML

@{
    string[] exportGrids = { "FirstGrid", "SecondGrid" };
}
@Html.EJS().Grid("FirstGrid").DataSource((IEnumerable<object>)ViewBag.FirstGridData).AllowPdfExport().ToolbarClick("toolbarClick").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("ShipName").HeaderText("Ship Name").Width(150).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();

}).AllowPaging().ExportGrids(exportGrids).Toolbar(new List<string>() { "PdfExport" }).Render()

@Html.EJS().Grid("SecondGrid").DataSource((IEnumerable<object>)ViewBag.SecondGridData).AllowPdfExport().Columns(col =>
{
  col.Field("EmployeeID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("FirstName").Width("140").Add();
  col.Field("City").Width("120").Add();
  col.Field("Country").Width("140").Add();

}).AllowPaging().Render()

<script>

function toolbarClick(args) {
    var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
    if (args.item.id === 'FirstGrid_pdfexport') {
        var appendPdfExportProperties = {
            multipleExport: { type: "AppendToPage", blankSpace: 10 }
        };
        firstGrid.pdfExport(appendPdfExportProperties, true);
    }
}

</script>

same-page.cs

public IActionResult Index()
{
    ViewBag.FirstGridData = OrderDetails.GetAllRecords();
    ViewBag.SecondGridData = EmployeeDetails.GetAllRecords();
    return View();
}

New page

PDF export functionality enables the exporting of multiple grids into separate pages (each grid on a new page) within the PDF file. To achieve this, you can specify multipleExport.type as NewPage in exportProperties.

CSHTML

@{
    string[] exportGrids = { "FirstGrid", "SecondGrid" };
}
@Html.EJS().Grid("FirstGrid").DataSource((IEnumerable<object>)ViewBag.FirstGridData).AllowPdfExport().ToolbarClick("toolbarClick").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("ShipName").HeaderText("Ship Name").Width(150).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();

}).AllowPaging().ExportGrids(exportGrids).Toolbar(new List<string>() { "PdfExport" }).Render()

@Html.EJS().Grid("SecondGrid").DataSource((IEnumerable<object>)ViewBag.SecondGridData).AllowPdfExport().Columns(col =>
{
  col.Field("EmployeeID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("FirstName").Width("140").Add();
  col.Field("City").Width("120").Add();
  col.Field("Country").Width("140").Add();

}).AllowPaging().Render()

<script>

    function toolbarClick(args) {
    var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
    if (args.item.id === 'FirstGrid_pdfexport') {
        var appendPdfExportProperties = {
            multipleExport: { type: 'NewPage' }
        };
        firstGrid.pdfExport(appendPdfExportProperties, true);
    }
    }

</script>

Multiple.cs

public IActionResult Index()
{
    ViewBag.FirstGridData = OrderDetails.GetAllRecords();
    ViewBag.SecondGridData = EmployeeDetails.GetAllRecords();
    return View();
}