Ag-grid-Enterprise expand/collapse all row using button? Very slow crashing FF and Edge

Question

I created a button to expand all the rows in ag-grid (Enterprise) having 150 rows in the grid. It is working fine in Chrome but it is showing an alert in the latest FF and Edge, saying the web page is making your browser slow. Any better approach to expand all the row? It is taking almost 10-15 second

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:

Calling node.setExpanded() causes the grid to get redrawn. If you have many nodes you want to expand, then it is best to set node.expanded=true directly, and then call api.onGroupExpandedOrCollapsed() when finished to get the grid to redraw the grid again just once.

So i modified my code like below:

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

Ag-gridDocumentation page inside Group Api

Answer 2

I'm supposing that you are using the row grouping feature, and that you meant that there are 150 grouped rows that are able to be expanded.

Currently your code is getting executed for every single row of data... not just the ones that are able to be expanded. So supposing you have 50 rows or so of data in each group, your calling the setExpanded function 7500 times. You can limit this to just calling the setExpanded on the grouped rows by putting in a check before calling setExpanded:

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

testing it on this example, it took roughly 2 seconds for 110 row groups and 5 seconds for 511 row groups in firefox

Answer 3

The API has expandAll and collapseAll:

api.expandAll();
api.collapseAll();

Note that due to the crappy architecture of AG Grid the expansion state (along with row selection etc) is lost if the row data changes or the grid is re-mounted/re-rendered. You should use deltaRowDataMode but make sure you give your rows a unique ID to help prevent this (though this option of course can cause some hard to debug bugs which I have reported).

Also if you want to restore the user expansion in this case you have no choice but to iterate and expand/collapse individual nodes.

Also they don't seem to work on a master-detail (enterprise feature) grid...