Froze Browser on Export Grid to Excel 50,000 rows

[Hiram Hernandez]

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.

[Rajapandi Ravi]

Hi Hiram,

Greetings from Syncfusion support

Before we start providing solution to your query, we need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.

1)            Please share how many columns you are binding in your Grid.

2)            Share your complete Grid rendering code(Ts & Html file).

3)            Share your syncfusion package version.

4)            Share the issue scenario in video demonstration format.

Regards,

Rajapandi R

[Hiram Hernandez]

1) The grid has 14 Columns

2) 

<ejs-grid

      [dataSource]="data"

      height="{{ gridSett.height }}"

      [locale]="this.gridSett.language['languageLocale']"

      allowSorting="true"

      allowPaging="true"

      allowFiltering="true"

      [allowExcelExport]="true"

      [allowPdfExport]="true"

      [allowResizing]="true"

      allowKeyboardNavigation="true"

      (recordClick)="handleRowClick($event)"

      [pageSettings]="gridSett.pageSettings"

      [filterSettings]="gridSett.filterSettings"

      (actionBegin)="onActionBegin($event)"

      (actionComplete)="onActionComplete($event)"

      (dataBound)="databound($event)"

      gridLines="None"

    >

      <e-columns>

        <e-column *ngFor="let column of columns" [headerText]="column.headerText | translate" [field]="column.field"

          [width]="column.width" [textAlign]="column.textAlign" [type]="column.type" [format]="column.format"

          clipMode="EllipsisWithTooltip" [valueAccessor]='valueAccess'></e-column>

      </e-columns>

    </ejs-grid>

// TS function

excelExport(grid){

    const excelExport: ExcelExportProperties = {

        fileName: `${fileName}.xlsx`,

      };

      grid.excelExport(excelExport);

      break;

}

3) Synfusion PAckage 

    "@syncfusion/ej2-angular-dropdowns": "^19.3.55",

    "@syncfusion/ej2-angular-grids": "^19.2.56",

    "@syncfusion/ej2-angular-popups": "^19.2.56",

4) I cannot share the video, but all buttons and functions froze. The hand icon is always visible, but any click in the entire page works, until the file is downloaded 

[Rajapandi Ravi]

Hi Hiram,

Thanks for your update

Based on your query we could see that while the browser freeze you like to show the user a loader or something while the file is processing for download. You can show the spinner while excel Exporting and hide the spinner once the excel export is completed. Please refer the below code example for more information.

   toolbarClick(args) { //toolbar click event of Grid

        var gridObj = document.getElementById("Grid").ej2_instances[0];

        if (args.item.id === 'Grid_excelexport') {

            gridObj.showSpinner();

            gridObj.excelExport();

        }

    }

   excelExportComplete(args) { //excelExportComplete event of Grid

        var gridObj = document.getElementById("Grid").ej2_instances[0];

        setTimeout(function () {

            gridObj.hideSpinner();//hide the waiting popup

        }.bind(gridObj), 500); //set the time delay as per your convenience

    }

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#excelexportcomplete

        https://ej2.syncfusion.com/angular/documentation/api/grid/#toolbarclick

Regards,

Rajapandi R

[Hiram Hernandez]

Is there a way to reduce the time of processing the file? ... 

[Rajapandi Ravi]

Hi Hiram,

Thanks for your update

In your query you have mentioned that you are maintaining around 50000 rows with 14 columns. So, while exporting all these 50000 rows (For example: 50000 rows * 14 columns = 700,000 cells)  in the client side which leads the performance issue in Browser.

To resolve the performance problem in browser, The Grid has an option to export the data to Excel in server side using Grid server export library. You can use this to perform server-side export for large amount of data to achieve your requirement.

More details on this along with the required DLL references needed for performing this action can be checked in the below documentation link,

Server-Side Export: https://ej2.syncfusion.com/angular/documentation/grid/excel-export/exporting-grid-in-server/

Regards,

Rajapandi R

[Naeim Fard]

Hi @Rajapandi Ravi

just trying to use what you suggested. The issue is the spinner will be frozen as well! because the cpu usage in 100%. any way to stop having 100% cpu usage? I don't care if the processing time increase. 

[Aishwarya Rameshbabu]

Hi Hiram,

Upon reviewing your inquiry, it appears that you are experiencing difficulty with displaying a spinner while exporting the Grid records to a pdf document. Please review the sample and code example below, which demonstrates the implementation of a basic HTML spinner. This spinner will continuously load until the pdf document is successfully exported from the Grid which provide a better user experience.

App.component.css

 

.grid-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.5);

  z-index: 1000;

  display: none;

}

 

.show-overlay {

  display: block;

}

 

#spinner {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border: 4px solid rgba(0, 0, 0, 0.1);

  border-radius: 50%;

  border-top: 4px solid #3498db;

  width: 20px;

  height: 20px;

  animation: spin 1s linear infinite;

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

 

App.component.ts

 

<div class="grid-overlay" [ngClass]="{ 'show-overlay': showSpinner }">

    <div id="spinner"></div></div>

 

    toolbarClick(args: ClickEventArgs): void {

        if (args.item.id === 'Grid_pdfexport') {

            this.showSpinner = true;

           (this.grid as GridComponent).pdfExport();

        }

    } 

    pdfExportComplete(): void {

        this.showSpinner = false;

    }

 

Sample: https://stackblitz.com/edit/github-24ikdd-4bzqs1?file=src%2Fapp.component.ts,index.html,src%2Fapp.component.css

If you still facing any issue, please share a simple issue replication sample along with a video demonstration.

Regards

Aishwarya R