Export flexgrid - spinning icon

Export flexgrid - spinning icon

Posted by: sravya_tamma on 17 July 2020, 7:53 am EST

• 

  sravya_tamma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 July 2020, 7:53 am EST

  Hello,

  I’m trying to export a grid, which usually take around 50-60 secs. When i click the export button, exportGrid() gets triggered.
  
  In this function i’m setting a variable exporting = true, which will show the spinning icon on UI. And after download completes it sets back to false.

  Issue : On button click, variable is immediately set to true, but the spinning icon does not appear to be spinning. It take around 40 secs for it to appear and mainly it appears on the screen right before it downloads the file.
  
  How can i get this icon to spin immediately after the button click?

  exportGrid(grid) {
          this.exporting = true;
          wjcGridXls.FlexGridXlsxConverter.saveAsync(grid, {
              includeColumnHeaders: true,
              sheetName: 'metadata'
          }, 'metadata' + '.xlsx',  (base64) => { // onSaved
            this.exporting = false;
          }, (reason) => { // onError
              console.log('The reason of save failure is ' + reason);
              this.error = reason;
              this.exporting = false;
          })
      }
  

  
   <div [hidden]="!exporting" class="spinner-load">
                  <mat-progress-spinner
                      class="example-margin"
                      [color]="color"
                      [mode]="mode"
                      [diameter]="40">
                  </mat-progress-spinner>
                  <span> Downloading ...</span>
              </div>
  
              <div [hidden]="exporting" class="loader"></div>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2020, 6:10 pm EST

  Hi Sravya,

  Before the version 5.20201.663, the saveAsync method was not truly asynchronous. It still used DOM to convert cell element to a WorkbookCell object. Since the method was somewhat synchronous, the JS engine was not able to update the spinner but as soon as the export was completed, the spinner worked but since the export has been already completed, it was hidden immediately.
  
  But after the specified version, this method became asynchronous and now can be used with spinners and other loading icons.

  Sample: https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/Excel/ProgressIndicator/purejs

  Unfortunately, there is no workaround for the earlier versions so if you need to use spinners, then I would suggest you update Wijmo to the latest version.

  Regards,
  
  Ashwin

• 

  sravya_tamma

  • Post Options:
  • Link
    Copy

  Posted 3 August 2020, 8:27 am EST

  Great, It worked Ashwin.

  Thanks,
  
  Sravya