How to efficiently expand nested FlexGrid details?

How to efficiently expand nested FlexGrid details?

Posted by: mark.david on 26 October 2022, 1:59 pm EST

• 

  mark.david

  • Post Options:
  • Link
    Copy

  Posted 26 October 2022, 1:59 pm EST - Updated 26 October 2022, 2:06 pm EST

  I’m trying to find a way to improve the performance of expanding multiple nested FlexGrid details at once.

  The ideal scenario is: when you click on a parent RowCol (P) within a FlexGrid, all its details expand, and those details become recognized as new RowCol objects. If those nested RowCol objects contain details, then those should be expanded too. The tree expansion visual is shown with this visual below:

  

  552×538 18.7 KB

  The functionality is working, but performance is not optimal with the way data binding works on FlexGrid rows, so I’m looking to improve performance.

  2 things happen when clicking on a FlexGrid item:

  1. showDetail() is called to show the current RowCol details.

  2. initializeGrid() is called to expand multiple RowCol objects and their details upon click.

  1. showDetail()

  HTML

  <a ... (click)="showDetail(parentDetailProvider, row, false)"></a>

  TypeScript

   public showDetail(parentDetailProvider: wjGridDetail.FlexGridDetailProvider, row: any, hideOthers?: boolean) {
      dp.showDetail(row, hideOthers);
      this.gridSelectionService.clearSelectionFromGrids(parentDetailProvider.grid);
   } 

  2. initializedGrid()

  HTML

  <wj-flex-grid #grid [itemsSource]="item.details" (initialized)="initializeGrid(gridScenarios, $event, thisDetailProvider)">

  TypeScript

  public initializeGrid(grid, eve, thisDetailProvider?: wjGridDetail.FlexGridDetailProvider) {
      if (thisDetailProvider!= null) {
        setTimeout(() => {
          try {
            for (var t = 0; t < grid.rows.length; t++) {
              if (thisDetailProvider.isDetailAvailable(t)) {
                thisDetailProvider.showDetail(t);
                this.gridSelectionService.clearSelectionFromGrids(thisDetailProvider.grid);
              }
            }
          } catch (err) { console.log(err); }
        }, 100);
      }
  }

  That summarizes the structure, and the functionality is working. Here are some other things I’ve tried but haven’t done anything to improve performance time or reduce latency:

  1. Turn expandRows() into an async function.

  2. Put all the FlexGrid objects into an array of Promises to take advantage of parallel processing.

  The question now is about improving performance, and if anyone could offer some insight/a direction into more efficiently expanding multiple RowCol objects (FlexGrid details) nested within a given RowCol.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 27 October 2022, 1:09 am EST

  Hello,

  We have responded on the support portal. Please refer to the link for the same: https://www.grapecity.com/my-account/my-support/case/CAS-35356-P1Y7T0

  Here is a copy of the response:

  We apologize but we are unable to replicate the issue at our end, there isn’t any noticeable performance issue at our end. Could you please refer to the below sample used to replicate the issue and let us know if any changes are required to replicate the issue at our end?

  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue.

  Sample link: https://stackblitz.com/edit/angular-h9axpf?file=src%2Fapp%2Fapp.component.ts

  Regards