Ag-grid-Enterprise développer/réduire toutes les lignes en utilisant le bouton? FF très lent et Edge

Question

J'ai créé un bouton pour développer toutes les lignes ag-grid (Enterprise) ayant 150 lignes dans la grille. Il fonctionne correctement dans Chrome, mais il affiche une alerte dans les dernières versions de FF et Edge, indiquant que la page Web ralentit votre navigateur. Une meilleure approche pour étendre toute la ligne? Il prend presque 10-15 secondes

HTML

<button (click)="expandAll(expand)">Expand/Collapse</button> 

JavaScript

this.columnDefs = [ 
      { 
       headerName: "", 
       field: "", 
       cellRenderer: "group",// for rendering cell 
       suppressMenu: true, 
       suppressSorting: true 
      } 
      ] 
      // This is how I am creating fullrow width 
      this.gridOptions = <GridOptions>{ 
      isFullWidthCell: function (rowNode) { 
      var rowIsNestedRow = rowNode.flower; 
      return rowIsNestedRow; 
      }, 
      fullWidthCellRendererFramework: AgGridInventorRowComponent, 
      doesDataFlower: function (dataItem) { 
      return true; 
     } 
    public expandAll(value:boolean) { 
      if(value) { 
       this.gridOptions.api.forEachNode((node) =>{ 
        node.setExpanded(true); 
       }); 
      } else { 
       this.gridOptions.api.forEachNode((node) =>{ 
        node.setExpanded(false); 
       }); 
      } 
     } 

Answer 1

As per the documentation : 

appel node.setExpanded() provoque la grille pour obtenir redessinée. Si vous avez plusieurs nœuds à développer, il est préférable de définir directement node.expanded = true, puis d'appeler api.onGroupExpandedOrCollapsed() une fois terminé pour que la grille ne redessine la grille qu'une seule fois. donc j'ai modifié mon code comme ci-dessous:

this.gridOptions.api.forEachNode(node =>{ 
    node.expanded= true; 
}); 
this.gridOptions.api.onGroupExpandedOrCollapsed(); 

Ag-gridDocumentation page à l'intérieur du groupe Api

Answer 2

Je supposant que vous utilisez le row grouping feature, et que vous signifie que il y a 150 lignes groupées qui peuvent être étendues.

Votre code est actuellement exécuté pour chaque ligne de données ... pas seulement celles qui peuvent être développées. Supposons que vous ayez 50 lignes de données dans chaque groupe, vous appelez la fonction setExpanded 7500 fois. Vous pouvez limiter ce nombre à appeler la setExpanded sur les lignes groupées en mettant un chèque avant d'appeler setExpanded:

public expandAll(value:boolean) { 
    this.gridOptions.api.forEachNode((node) =>{ 
     if (node.group) 
      node.setExpanded(value); 
    }); 
} 

test sur this example, il a fallu environ 2 secondes pour 110 groupes de lignes et 5 secondes pour 511 groupes de lignes dans Firefox