Grid Performance Advice

Grid Performance Advice

Posted by: mark on 19 July 2018, 3:22 pm EST

• 

  mark

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 July 2018, 3:22 pm EST

  We’re having issues displaying a lot of data in flex grids that use custom cell templates (

  [cellType]="'Cell'"

  ). Doing some profiling in Chrome, it looks like the slowest piece is a call we’re doing to

  $row.grid.getCellData($row.index, $col.index, true)

  in order to get the formatted value for the current cell, which we then style.

  Is there a more efficient way to get the data for the current cell? If possible, getting it both with and without formatting would be preferable. (I know that the

  item

  variable is available, but the columns in our grid are dynamic, so there’s not a great way for us to get the formatted value at runtime)

  Thanks.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 July 2018, 8:23 am EST

  Hi,
  
  For unformatted data, you may use item object in cell-templates.
  
  To get the formatted value you may use Globalize.format() method.
  
  Refer here for more info on Globalize.format() method:-http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.Globalize.Class.html#format

  //please refer to following code snippet

  <wj-flex-grid-column [binding]="'colBinding'" [format]="'n2'">
  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  {{getFormattedValue(cell.item.colBinding,'n2')}}
  </ng-template>
  </wj-flex-grid-column>
  //equivalent getFormattedValue() method
  getFormattedValue(){
  return wjcCore.Globalize.format(value,format);
  }
  

  ~Manish

• 

  mark

  • Post Options:
  • Link
    Copy

  Posted 24 October 2018, 1:31 pm EST

  We’ve done some more performance work since my initial post and found that using cell-templates in any context absolutely kills grid performance because it balloons the layout stage of the render.

  It is orders-of-magnitude faster to use the itemFormatter than to provide a cell template.

  Why is this the case? Is there something you guys could do to fix this?

  There clearly appears to be something wrong. We shouldn’t have to actively avoid using cell-templates because they are so inefficient.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2018, 5:22 am EST

  Hi,

  A performance difference in the grid with and without cell-templates is expected as part of the design.
  
  What basically happens is cell-templates uses a DirectiveCellFactory on top of regular CellFactory to apply templates. Now when a cell is created and grid needs to apply cell-template then it is required to first instantiate the cell template which is basically done using angular’s viewContainerRef.createEmbeddedView() method which introduces extra overhead and as the template becomes heavy the overhead is also expected to increase. When using itemFormatter instead to cell-templates, overhead due to the instantiation of the template is removed giving a better performance.
  
  If getting the best performance is your priority over the convenience of cell-templates then you may also try to implement a custom CellFactory for the grid.
  
  Please refer to the following sample to get started with cell factory:
  
  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellFactory

  ~Sharad