We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
App.component.html
<button (click)="onClickMe()" ejs-button [isPrimary]="true">Export to Excel</button>
<ejs-grid #grid [dataSource]='data' allowFiltering='true' [allowPaging]="true" >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' format='C2' width=90></e-column>
<e-column field='ShipCity' headerText='Ship City' width=120></e-column>
</e-columns>
</ejs-grid>
<form action="/Home/ExcelExport" (ngSubmit)="onSubmit()" method="POST">
<input name="GridModel" hidden id="btn" />
</form>
App.component.ts
export class AppComponent {
title = 'EJ2Grid';
public data: Object[];
@ViewChild('grid')
public gridInstance : GridComponent ;
ngOnInit(): void {
this.data = data;
}
onClickMe(e){
var query = this.gridInstance.getDataModule().generateQuery(true);
var queries = new UrlAdaptor().processQuery(new DataManager({ url: '' }), query);
var columns = JSON.stringify({ columns: this.gridInstance.columns, queries: JSON.parse((queries as any).data) });
(document.getElementById("btn") as any).value = columns;
var form = document.getElementsByTagName("form")[0];
form.submit();
}
}
Controller:
using Syncfusion.EJ2.Base;
using Syncfusion.XlsIO;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Grids;
using Newtonsoft.Json;
namespace EJ2Grid.Controllers
{
public class ExportModel // Created the model class to Deserialize the GridModel
{
public List<GridColumns> Columns { get; set; }
public DataManagerRequest Queries { get; set; }
}
public class HomeController : Controller
{
public static List<Orders> order = new List<Orders>();
public void ExcelExport(string GridModel)
{
ExportModel exportModel = new ExportModel();
exportModel = (ExportModel)JsonConvert.DeserializeObject(GridModel, typeof(ExportModel)); // Deserialized the GridModel
using (ExcelEngine excelEngine = new ExcelEngine())
{
IApplication application = excelEngine.Excel;
application.DefaultVersion = ExcelVersion.Excel2013;
IWorkbook workbook = application.Workbooks.Create(1);
IWorksheet worksheet = workbook.Worksheets[0];
IEnumerable DataSource = order;
if (exportModel.Queries.Where != null)
{
DataOperations operation = new DataOperations();
if (exportModel.Queries.Where != null && exportModel.Queries.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, exportModel.Queries.Where, exportModel.Queries.Where[0].Operator); // Filtered the export datasource based the filter query
}
}
//Import the data to worksheet
IList<Orders> reports = DataSource.AsQueryable().Cast<Orders>().ToList();
worksheet.ImportData(reports, 2, 1, true);
workbook.SaveAs("Excel.xlsx", HttpContext.ApplicationInstance.Response, ExcelDownloadType.Open);
}
}
}
} |
I have a grid, that the export works perfectly when it has a few rows, 1000 or 2000 rows the export works perfectly. But when the grid has a lot of rows 50 000 for example, All the screen frozes, and after several time the file is downloaded and everything works again.
I do not have any problem with the time to download the file. The problem is that the entire browser is frozen.
Is there a way to do not froze the entire browser, while the file is downloading? In fact, If there is a way to track the process and show the user a loader, or something that the file is processing for download.... That would be perfect.
Hi Hiram,
Thanks for your update.
Based on your query, you want to show the spinner in the grid when the excel exporting starts and remove the spinner when the excel exporting completes. Your requirement, can be achieved by calling the methods ‘showSpinner’ and `hideSpinner` the `beforeExcelExport` and `excelExportComplete` events of the EJ2 Grid respectively.
Please refer the below code example.
|
beforeExcelExport(args) { this.grid.showSpinner(); }
excelExportComplete(args) { this.grid.hideSpinner(); }
|
Sample: https://stackblitz.com/edit/angular-hjtkvu?file=app.component.html,app.component.ts
Please get back to us for further details.
Regards,
Joseph I.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
