FlexGrid XLSX export is slow

FlexGrid XLSX export is slow

Posted by: rrjohnson1985 on 14 September 2017, 11:34 am EST

• 

  rrjohnson1985

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:34 am EST

  In an Angular2 application, I’m using the FlexgridXlsxConverter to export the grid as follows:

      
  wijmo.grid.xlsx.FlexGridXlsxConverter.save(this.flexGrid, {
     includeColumnHeaders: true,
     includeCellStyles: false,
     includeRowHeaders: false
  }, 'test.xlsx');
  

  The problem is that the export takes roughly 4 seconds to complete and locks the browser during those 4 seconds. The FlexGrid currently has about 9 columns and 1100 records in it, but I expect that we’ll have at least 5k records in the future. Is this a known issue? Is there anything that can be done to improve performance?

  Also I’m not sure if it matters, but I’m using JSZip 2.5.

  Thanks,
  
  Raleigh

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Hello,

  We are investigating the issue further at our end. We will soon share our observations on the same.

  Thanks,
  
  Manpreet Kaur

• 

  banzor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Raleigh,

  from Mike:

  I'm not able to observe the performance issue on my side. I checked a 1000 rows and 13 columns grid, it only needs about 550 ms to export this grid. And it needs about 1100 ms to export 2000 rows.

  I need more detail information about the customer’s grid.
  
  Such as how many columns in the grid, are there merged cells in the grid and etc…

  Can you send us a repro sample? That or give us more info to try to repro on our end.

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  I find that the export process is slow as well. I’m exporting 675 records with about 20 columns and it takes about nine (9) seconds. The browser locks while I wait for it to finish.

  Might I suggest that some events be added so that we can display show/hide a processing icon of some sort.

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Update: In regard to the slowness in exporting I reported on 1/19/2017, I have determined that the cause seems to be the amount of “cell formatting” that is taking place.

  Using “includeCellStyles: true” as below, takes about nine (9) seconds for my export to complete.
  
  wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.searchGrid, { includeColumnHeaders: true, includeCellStyles: true}, “PCRSearchExtract.xlsx”);

  Changing this to use false (“includeCellStyles: false”) reduces it down to 2 seconds or less.
  
  wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.searchGrid, { includeColumnHeaders: true, includeCellStyles: false}, “PCRSearchExtract.xlsx”);

• 

  girish.balanagu

  • Post Options:
  • Link
    Copy

  Posted 3 October 2017, 10:41 am EST

  I am also facing the same issue with 28 columns and around 23763 rows even more based on the user search criteria. File size is around 17MB for this. Is there any memory limit export. It gives unresponsive in chrome browser. Here I added the code related to exportXlsx for the export.
  
  HTML code

  
  <ul class="nav navbar-nav pull-right nav-bar-date">
              <li class="dropdown">
                  <a href="#" data-toggle="dropdown"><div class="th_img"></div></a>
                  <ul class="dropdown-menu">
                      <li>
                          <a href="" download="Report.xlsx" ng-click="ReportGrid.exportXlsx.export()" id="ReportGrid-exportXlsx"><span class="bento-icon-export-group"></span>Export Report</a>
                      </li>
                  </ul>
              </li>
          </ul>
  
  

  JS Code

  exportXlsx: {
                  /**
                   * Include column header row in xlsx export
                   *
                   * @type {boolean}
                   */
                  includeColumnHeader: true,
                  includeCellStyles: false,
  
                  /**
                   * Export ReportGrid to xlsx
                   */
                  export: function () {
                      // Clone the grid and use it to export so we don't update the dom when enabling all pages
                      var _grid = $scope.ReportGrid.flexGrid;
  
                      // Update cloned grids page size to encompass all data
                      _grid.beginUpdate();
                      _grid.collectionView.pageSize = 0;
  
                      wijmo.grid.xlsx.FlexGridXlsxConverter.save(
                          _grid,
                          {
                              includeColumnHeader: $scope.ReportGrid.exportXlsx.includeColumnHeader,
                              includeCellStyles: $scope.ReportGrid.exportXlsx.includeCellStyles
                          },
                          'Report.xlsx'
                      );
  
                      _grid.collectionView.pageSize = parseInt(user_default_settings.defaultDataTableLength);
                      _grid.endUpdate();
                  }
              },
  

  Appriciate for reading. Please reply do needful.

• 

  benjamin.runnels

  • Post Options:
  • Link
    Copy

  Posted 3 October 2017, 3:17 pm EST

  I think the only way to make this faster is to create mock grid and gridcolumn classes that don’t require or create any html elements.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 October 2017, 7:10 am EST

  Hi Benjamin,
  
  Thank you for replying this post.
  
  Girish,
  
  Could you please give a try to export functionality with new build 5.20172.359 and without including cell style?

  Thanks,
  
  Manish Kumar Gupta

• 

  waheedahmed.hyder

  • Post Options:
  • Link
    Copy

  Posted 6 October 2017, 7:21 am EST

  Hi Manish

  We are on the same version but the browser is getting crashed.

  Thanks,
  
  Waheed

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2017, 3:28 am EST

  Hi Waheed,
  
  Could you please share some information regarding your project for e.g.

  • "* “Number of Rows”

  • “Number of columns”

  • "How you are exporting "

  • “save method arguments”

  • “Browser”

  • “Build information”
    
    "

  This will help us to investigate the case.
  
  ~Manish Kr Gupta

• 

  waheedahmed.hyder

  • Post Options:
  • Link
    Copy

  Posted 13 October 2017, 6:44 am EST

  Hi Manish,

  Please find below as requested:

  • "

  • “Number of Rows: 30000+”

  • “Number of columns: > 16”

  • “How you are exporting : using save method”

  • “save method arguments : includesHeaderColumn”

  • “Browser : Chrome”

  • "Build information: “5.20172.334"”

  "

  Thanks,
  
  Waheed

• 

  waheedahmed.hyder

  • Post Options:
  • Link
    Copy

  Posted 30 October 2017, 9:58 am EST

  Hi Manish,

  I am still struggling with the excel export issue is there any way to handle this

  This the piece of code in wijmo.grid.xlsx.js which is crashing when we are trying to export 25000+ records with 30 columns

  Request your help in this.

  Thanks
  
  Waheed

• 

  Tarannum.Banu

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 5:07 am EST

  I am facing the same issue, how to resolve this issue?

• 

  skantappa

  • Post Options:
  • Link
    Copy

  Posted 6 March 2019, 12:53 pm EST

  Hi, I have the same issue,
  
  Can you please provide a way to show Processing Please wait… and then hide once export is done.

• 

  rasika.sinha

  • Post Options:
  • Link
    Copy

  Posted 18 April 2019, 6:38 am EST

  Hi, we are facing the same issue, do we have any update in this context?

  Thank you