ASP.NET Core

Search results

Excel Export in ASP.NET Core Grid control

20 Jan 2022 / 5 minutes to read

The excel export allows exporting Grid data to Excel document. You need to use the ExcelExport method for exporting. To enable Excel export in the grid, set the allowExcelExport property as true.

To use excel export, You need to define the ExcelExport in inbuild toolbar and define the toolbarClick event for exporting the Grid.

tagHelper

excel-export.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "ExcelExport" })" allowPaging="true">
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="ShipCountry" visible="false" headerText="Ship Country" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" visible="false" headerText="Ship City" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            gridObj.excelExport();
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Multiple Grid exporting

The excel export provides an option to export multiple grid data in the same excel file.

Same sheet

The excel export provides support to export multiple grids in same sheet. To export in same sheet, define multipleExport.type as AppendToSheet in exportProperties. It have an option to provide blank rows between grids. These blank rows count can be defined by using the multipleExport.blankRows.

tagHelper

same-sheet.cs

<ejs-grid id="FirstGrid" dataSource="@ViewBag.FirstGridData" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<ejs-grid id="SecondGrid" dataSource="@ViewBag.SecondGridData" allowExcelExport="true" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name" width="140"></e-grid-column>               
        <e-grid-column field="Title" headerText="Title" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

 <script>
    function toolbarClick(args) {
        if(args.item.id === 'FirstGrid_excelexport'){
            var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
            var secondGrid = document.getElementById("SecondGrid").ej2_instances[0];
            var appendExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };

            var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, true);
            firstGridExport.then((fData) => {
                secondGrid.excelExport(appendExcelExportProperties, false, fData);
            });
        }
    }
   </script>

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

By default, multipleExport.blankRows value is 5.

New Sheet

Excel exporting provides support to export multiple grids in new sheet. To export in new sheet, define multipleExport.type as NewSheet in exportProperties.

tagHelper

new-sheet.cs

<ejs-grid id="FirstGrid" dataSource="@ViewBag.FirstGridData" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<ejs-grid id="SecondGrid" dataSource="@ViewBag.SecondGridData" allowExcelExport="true" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name" width="140"></e-grid-column>               
        <e-grid-column field="Title" headerText="Title" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="BirthDate" format="yMd" headerText="Birth Date" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

 <script>
    function toolbarClick(args) {
        if(args.item.id === 'FirstGrid_excelexport'){
            var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
            var secondGrid = document.getElementById("SecondGrid").ej2_instances[0];
            var appendExcelExportProperties = {
                multipleExport: { type: 'NewSheet' }
            };

            var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, true);
            firstGridExport.then((fData) => {
                secondGrid.excelExport(appendExcelExportProperties, false, fData);
            });
        }
    }
   </script>

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

To customize excel export

The excel export provides an option to customize mapping of the grid to excel document.

Export current page

The excel export provides an option to export the current page into excel. To export current page, define exportType to currentpage.

tagHelper

export-current.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                exportType: 'CurrentPage'
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Export hidden columns

The excel export provides an option to export hidden columns of grid by defining includeHiddenColumn as true.

tagHelper

export-hidden.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" visible="false" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                includeHiddenColumn: true
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Show or Hide columns on Exported Excel

You can show a hidden column or hide a visible column while printing the grid using toolbarClick and excelExportComplete events.

In the toolbarClick event, based on args.item.id as Grid_excelexport. We can show or hide columns by setting visible property of e-grid-column tag helper to true or false respectively.

In the excelExportComplete event, We have reversed the state back to the previous state.

In the below example, we have CustomerID as a hidden column in the grid. While exporting, we have changed CustomerID to visible column and ShipCity as hidden column.

tagHelper

show-hide.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" excelExportComplete="excelExportComplete" toolbar="@(new List<string>() { "ExcelExport" })" allowPaging="true">
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" visible="false" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCity" visible="false" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry" visible="false" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>


<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            this.columns[1].visible = true;
            this.columns[2].visible = false;
            gridObj.excelExport();
        }
    }
    function excelExportComplete(args) {
        this.columns[1].visible = false;
        this.columns[2].visible = true;
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

The excel export provides an option to export with filter option in excel by defining enableFilter as true . It requires the allowFiltering to be true.

tagHelper

enable-filter.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" visible="false" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                enableFilter: true
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Theme

The excel export provides an option to include theme for exported excel document.

To apply theme in exported Excel, define the theme in exportProperties .

tagHelper

theme.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                theme: {
                    header: { fontName: 'Segoe UI', fontColor: '#666666' },
                    record: { fontName: 'Segoe UI', fontColor: '#666666' },
                    caption: { fontName: 'Segoe UI', fontColor: '#666666' }
                }
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

By default, material theme is applied to exported excel document.

To add header and footer

The excel export provides an option to include header and footer content for exported excel document.

tagHelper

header-footer.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                header: {
                    headerRows: 7,
                    rows: [
                        { cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
                        { cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                        { cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                        { cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                        { cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
                        { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
                    ]
                },
                footer: {
                    footerRows: 4,
                    rows: [
                        { cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
                        { cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
                    ]
                },
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

File Name for Exported document

You can assign the file name for the exported document by defining fileName property in ExcelExportProperties.

tagHelper

export-filename.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var excelExportProperties = {
                 fileName:"new.xlsx"
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Custom data source

The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource in exportProperties.

tagHelper

custom-data.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            var data = [
                { OrderID: "100", CustomerID: "Vinet", Freight: "2.00", OrderDate: new Date() },
                { OrderID: "101", CustomerID: "Hanar", Freight: "2.01", OrderDate: new Date() },
                { OrderID: "102", CustomerID: "Mega", Freight: "4.48", OrderDate: new Date() },
                { OrderID: "103", CustomerID: "Sam", Freight: "19.23", OrderDate: new Date() }
            ];
            var excelExportProperties = {                    
                dataSource: data
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Exporting grouped records

The excel export provides outline option for grouped records which hides the detailed data for better viewing. In grid, we have provided the outline option for the exported document when the data’s are grouped.

tagHelper

excel-group.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true" allowGrouping="true">
    <e-grid-groupsettings columns="@(new string[] {"OrderDate"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_excelexport') {
            gridObj.excelExport();
        }
    }
</script>

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Export the hierarchy grid

The grid have an option to export the hierarchy grid to excel document. By default, grid will exports the visible child grids in expanded state. you can change the exporting option by using the ExcelExportProperties.hierarchyExportMode property. The available options are,

Mode	Behavior
Expanded	Exports the visible child grids in expanded state.
All	Exports the all the child grids in expanded state.
None	Exports all child grids in collapse state.

tagHelper

hierarchy.cs

@{  var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
          DataSource = (IEnumerable<object>)ViewBag.DataSource,
          QueryString = "EmployeeID",
          Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
                new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
                new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
                new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
                new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
        }
      };
  }

<ejs-grid id="HierarchyExport" dataSource="@ViewBag.EmpDataSource" allowExcelExport="true" childGrid="ChildGrid" toolbar="@(new List<string>() {"ExcelExport" })" toolbarClick="toolbarClick" >
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name" width="120"></e-grid-column>
        <e-grid-column field="LastName" headerText="Last Name"  width="170"></e-grid-column>
        <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("HierarchyExport").ej2_instances[0];
        if (args.item.id === 'HierarchyExport_excelexport') {
            var excelExportProperties = {
                hierarchyExportMode: "All"
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource =  OrdersDetails.GetAllRecords();;
    ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
    return View();
}

Limitations

Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the Microsoft Limitation

Exporting Grid in server

The Grid have an option to export the data to Excel in server side using Grid server export library.

Server Dependencies

The Server side export functionality is shipped in the Syncfusion.EJ2.GridExport package, which is available in Essential Studio and nuget.org.The following list of dependencies is required for Grid server side Excel exporting action.

Syncfusion.EJ2
Syncfusion.EJ2.GridExport

Server Configuration

The following code snippet shows server configuration using ASP.NET Core Controller Action.

To Export the Grid in server side, You need to call the serverExcelExport method for passing the Grid properties to server exporting action.

tagHelper

server-exportCore.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="400" toolbarClick="toolbarClick" toolbar=@(new List<string>() { "ExcelExport" })>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="CustomerID" width="100"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="100" textAlign="Right"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="100" textAlign="Right"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.serverExcelExport("/Home/ExcelExport");
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = orddata;
    return View();
}

public ActionResult ExcelExport([FromForm] string gridModel)
{
    GridExcelExport exp = new GridExcelExport();
    Grid gridProperty = ConvertGridObject(gridModel);
    return exp.ExcelExport<OrdersDetails>(gridProperty, orddata);
}

private Grid ConvertGridObject(string gridProperty)
{
    Grid GridModel = (Grid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(Grid));
    GridColumnModel cols = (GridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(GridColumnModel));
    GridModel.Columns = cols.columns;
    return GridModel;
}

public class GridColumnModel
{
    public List<GridColumn> columns { get; set; }
}

Note: Refer to the GitHub sample for quick implementation and testing from here.

CSV Export in server

You can export the Grid to CSV format by using the serverCsvExport method which will pass the Grid properties to server.

In the below demo, we have invoked the above method inside the toolbarClick event. In server side, we have deserialized the Grid properties and passed to the CsvExport method which will export the properties to CSV format.

tagHelper

server-exportCore.cs

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="400" toolbarClick="toolbarClick" toolbar=@(new List<string>() { "CsvExport" })>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="CustomerID" width="100"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="100" textAlign="Right"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="100" textAlign="Right"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.serverCsvExport("/Home/CsvGridExport");
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = orddata;
    return View();
}

public ActionResult CsvGridExport([FromForm] string gridModel)
{
    GridExcelExport exp = new GridExcelExport();
    Grid gridProperty = ConvertGridObject(gridModel);
    return exp.CsvExport<OrdersDetails>(gridProperty, orddata);
}

private Grid ConvertGridObject(string gridProperty)
{
    Grid GridModel = (Grid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(Grid));
    GridColumnModel cols = (GridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(GridColumnModel));
    GridModel.Columns = cols.columns;
    return GridModel;
}

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Excel Export in ASP.NET Core Grid control

Multiple Grid exporting

Same sheet

New Sheet

To customize excel export

Export current page

Export hidden columns

Show or Hide columns on Exported Excel

Export with filter options

Theme

To add header and footer

File Name for Exported document

Custom data source

Exporting grouped records

Export the hierarchy grid

Limitations

Exporting Grid in server

Server Dependencies

Server Configuration

CSV Export in server