Search results

Exporting Grid in Server in Angular Grid component

24 May 2022 / 3 minutes to read

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.

Copied to clipboard
    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; }
    }
        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm)
        {
            IEnumerable DataSource = OrdersDetails.GetAllRecords();
            DataOperations operation = new DataOperations();
            int count = DataSource.Cast<OrdersDetails>().Count();
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
        }
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToolbarItems, GridComponent } from '@syncfusion/ej2-angular-grids';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbar' height='273px'(toolbarClick)='toolbarClick($event)'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: DataManager;
public toolbar: ToolbarItems[];

public dataManager: DataManager = new DataManager({
    url: 'Home/UrlDatasource',
    adaptor: new UrlAdaptor()
});

@ViewChild('grid')
public grid: GridComponent;

ngOnInit(): void {
    this.data = this.dataManager;
    this.toolbar = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
        this.grid.serverExcelExport('Home/ExcelExport');
    }
}
}

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

CSV Export in server side

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.

Copied to clipboard
    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;
    }

        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm)
        {
            IEnumerable DataSource = OrdersDetails.GetAllRecords();
            DataOperations operation = new DataOperations();
            int count = DataSource.Cast<OrdersDetails>().Count();
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
        }
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToolbarItems, GridComponent } from '@syncfusion/ej2-angular-grids';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbar' height='273px'(toolbarClick)='toolbarClick($event)'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: DataManager;
public toolbar: ToolbarItems[];

public dataManager: DataManager = new DataManager({
    url: 'Home/UrlDatasource',
    adaptor: new UrlAdaptor()
});

@ViewChild('grid')
public grid: GridComponent;

ngOnInit(): void {
    this.data = this.dataManager;
    this.toolbar = ['CsvExport'];
}
toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_csvexport') { // 'Grid_csvexport' -> Grid component id + _ + toolbar item name
        this.grid.serverCsvExport('Home/CsvGridExport');
    }
}
}