Export Multiple Grids

26 Sep 20233 minutes to read

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

Same sheet

Excel exporting provides support for exporting multiple grids on the same sheet. To export the grids in the same sheet, define multipleExport type as AppendToSheet in exportProperties. It also has an option to provide blank rows between the grids. These blank rows count can be defined by using the multipleExport.blankRows property.

CSHTML

@{
    string[] exportGrids = { "FirstGrid", "SecondGrid" };
}
@Html.EJS().Grid("FirstGrid").DataSource((IEnumerable<object>)ViewBag.FirstGridData).AllowExcelExport().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>() { "ExcelExport" }).Render()

@Html.EJS().Grid("SecondGrid").DataSource((IEnumerable<object>)ViewBag.SecondGridData).AllowExcelExport().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) {
        if (args.item.id === 'FirstGrid_excelexport') {
            var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
            var appendExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };
            firstGrid.excelExport(appendExcelExportProperties, true);
        }
    }
</script>

Same-sheet.cs

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

NOTE

By default, multipleExport blankRows value is 5.

New sheet

Excel export functionality enables the exporting of multiple grids onto separate sheets (each grid in new sheet of excel) within the Excel file. To achieve this, you can specify
multipleExport.type as NewSheet in exportProperties.

CSHTML

@{
    string[] exportGrids = { "FirstGrid", "SecondGrid" };
}
@Html.EJS().Grid("FirstGrid").DataSource((IEnumerable<object>)ViewBag.FirstGridData).AllowExcelExport().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>() { "ExcelExport" }).Render()

@Html.EJS().Grid("SecondGrid").DataSource((IEnumerable<object>)ViewBag.SecondGridData).AllowExcelExport().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) {
        if (args.item.id === 'FirstGrid_excelexport') {
            var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
            var appendExcelExportProperties = {
                multipleExport: { type: 'NewSheet' }
            };
            firstGrid.excelExport(appendExcelExportProperties, true);
        }
    }
</script>

New-sheet.cs

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