FlexGrid freezes when resizing columns of very large grids

FlexGrid freezes when resizing columns of very large grids

Posted by: kyle.m.vassella on 5 December 2018, 9:41 pm EST

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 5 December 2018, 9:41 pm EST

  Hi GrapeCity,

  I’ve got a FlexGrid (WIJMO 5 in Angular 6) which pulls a little more than 2500 records. On this FlexGrid, if I try to resize a column by clicking and dragging the edge of a column header, on the second try or so, my chrome browser freezes. The mouse stays as the ‘resize’ icon and I can’t take any more actions except for moving the mouse. The browser typically has to be force restarted.

  Is this an issue you’ve heard of before with very large grids? Obviously a good fix could be to try and pull less records at once. But I wanted to see if this is a known issue with very large grids.

  It could be an issue specific to my code, but perhaps it’s just a limitation of the framework? AKA too much data shown at once can cause problems?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 7 December 2018, 1:36 am EST

  Hi,

  Sorry for the late response on this.

  We are unable to replicate the issue at our end.FlexGrid is optimized for performance and could handle large dataSets easily.
  
  You may confirm the same from the following sample:
  
  https://demos.wijmo.com/5/angular2/explorer/explorer/#/grid/intro
  
  In the sample, change no of items to 50K or 100K and try out different features of the grid.

  There could be other factors which might degrade the grid’s performance a bit like heavy use of cell-templates or itemFormatter, large grid size(width/height of grid).
  
  Please let us know the following:
  
  • Are you using itemFormatter or cell-templates, if yes then please share some code snippet or sample of the same.
  
  • No. of columns in grid
  
  • Grid height, width
  
  • If using virtualization?
  
  • Browser you are using
  
  • Wijmo version
  
  or any other info you think would be useful.
  
  If please, please share a sample reproducing the issue, that would be really useful in debugging the issue.

  ~Sharad

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 1:30 am EST - Updated 3 October 2022, 8:04 pm EST

  Hi Sharad,

  I was going to start a ticket on this matter but the tickets aren’t working at the moment. Regarding the issue above,

  In Angular (flexgrid, WIJMO version 5.20191.603) on large grids (1000 records+), our current use of is slowing performance so badly that the app breaks. We have a ‘Delete/Undelete’ column which contains a button that toggles between ‘Delete’ or ‘Undelete’ (each of these call a different function) depending on that record’s ‘deleted’ status. To accomplish this, we use nested elements to toggle the delete/undelete button (therefor, the performance problem is likely compounded).

  This performance hit is seen when doing certain actions on multiple records: deleting multple rows at once via the ‘delete’ key, and showing/hiding columns via our dropdown. Oddly, batch PUT and POST requests aren’t slow at all. But whenever the ‘Delete/Undelete’ column is hidden, performance gets much better and freezes don’t happen - which is why I believe could be the cause.

  I was hoping you could tell me if there’s a way to optimize what I’m doing w/ the ‘Delete’/‘Undelete’ button (AKA are nested ng-templates really needed to accomplish this toggling?). Is there an alternative to ng-template? Or does any UI idea other than a delete/undelete toggle button come to mind that wouldn’t require ?

  Here’s a snippet of our column which gives us problems on big grids:

          <wj-flex-grid-column [header]="'Delete/Undelete'" [binding]="'deleted'" [width]="150" [visible]="true" [align]="'center'" format="'n2'" [dataType]="'Number'">
              <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item" let-row="row">
                  <button class="btn-secondary" (click)="delRow(this.m_strApiPath, this.m_collectionView)" *ngIf="!item.deleted; else unDeleted">Delete</button>
                  <ng-template #unDeleted>
                      <button class="btn-dark" (click)="unDelRow(this.m_strApiPath, this.m_collectionView)">Un-Delete</button>
                  </ng-template>
              </ng-template>
          </wj-flex-grid-column>
  

  Attached is a screenshot of our app. You’ll see the WIJMO multi select column dropdown which freezes during use on large grids if delete/undelete column is currently visible:

  Thanks,
  
  Kyle Vassella

  

  1453×714 79.3 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 4:55 am EST

  Hi Kyle,

  Please try with the production mode once and check if the issue persists. If you are using angular CLI then you may enable production mode by using the --prod flag. Run the following command in the root folder of your app:

  ng serve --prod
  

  If you are not using angular cli then you need to import enableProdMode function from core module and call it before bootstrapping the application. Please refer to the following code snippet:

  import { enableProdMode } from '@angular/core';
  enableProdMode();
  // now bootstrap app
  
  

  If the issue persists, then you may refer to the following sample which demonstrates how we could add delete/undelete button without the use of ng-templates using formatItem event:
  
  https://stackblitz.com/edit/angular-nkcjvh?file=src%2Fapp%2Fapp.component.ts

  Also if your main concern is performance then you may also implement a custom CellFactory. It is not as convenient as cell-templates or itemFormatter but provides the best performance compared to the other options. Please refer to the following sample to get started with using cell factories:
  
  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellFactory

  ~sharad

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 7:16 pm EST - Updated 3 October 2022, 8:04 pm EST

  Thanks a lot, Sharad.

  performed much faster in production build - batch deletes were no longer slow at all, however, column resize was still too slow.

  I switched to your itemFormatter strategy to display the buttons and this strategy was notably faster with column resize.

  My only remaining issue is that the grid’s row height is not being auto adjusted to fit the height, I believe because the buttons are being rendered after the grid’s row height is already set. Is there any way you can think of to fix this? The same issue appears in your example as well: https://stackblitz.com/edit/angular-nkcjvh?file=src%2Fapp%2Fapp.component.ts

  

  • Kyle Vassella
• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2019, 2:42 am EST

  Hi Kyle,

  You may simply remove the padding from the cell hosting button and that fix the issue. However, if you need to increase the row’s default height, then you could do so by using defaultSize property of the RowCollection. Please refer to the following code snippet:

  flexGridInstance.rows.defaultSize = 50;
  

  You may also refer to the following updated sample:
  
  https://stackblitz.com/edit/angular-acsbe4?file=src/app/app.component.ts
  
  In the sample above, padding is removed to fit the button.