Ag-grid-angular row group tree data slow rendering-CodePudding

I am using Ag-grid-angular row grouping using tree data. I am having very large data set of around ten thousand rows or more. I have created a drop-down where I have levels as an option. When I select the level all grid groups are expanded/collapsed accordingly at once. I am getting the slowness and page freeze problem when I am collapsing or expanding.

Expand/collapse method:

expandGrid(level){
this.selectedOption = level.toString();
If(level === 1) {
this.gridapi.collapseAll();
} else {
this.gridApi.forEachNode((node) =>{
if (node.level <= level - 2) {
 node.setExpanded(true);}
else {
node.setExpanded(false);
}
});
}}

CodePudding user response：

It sounds like the slowness and freezing you're experiencing may be due to the large number of rows in your data set. Expanding and collapsing all the nodes in the grid at once can be a computationally expensive operation, especially when dealing with such a large number of rows.

One possible solution to improve performance is to use a technique called "lazy loading". This involves only loading and expanding the nodes that are currently visible on the screen, and then loading and expanding additional nodes as the user scrolls. This can significantly reduce the number of nodes that need to be expanded or collapsed at once, which can help improve performance.

Another solution is to use pagination or load data on demand, where when you expand a parent node, it loads the child nodes only if they aren't already loaded. This way it reduces the number of nodes that needs to be loaded at once.

Another solution is to make use of Asynchronous operations, using setTimeout or setInterval function to break down the expand/collapse operation into smaller chunks which can be handled by browser efficiently.

You can also try to optimize the expand/collapse method by reducing the number of iterations it performs. For example, you can store the current state of each node in an array or object and check the state of each node before setting it to expanded or collapsed. This way, you can avoid unnecessary iterations.

You can also try to test the performance with a smaller sample of your data to see if the problem is related to the size of the data set or if there are other issues that need to be addressed.

It's also important to note that the grid component you're using (ag-grid-angular) has a large number of configuration options that can be used to improve performance. I recommend you to take a look at the documentation and see if there are any options that can be used to improve performance in your specific use case.

CodePudding user response：

I have a complete solution especially for those who have concern about latency and slowness.

Please see this example that I created on Plnkr.

Basically you can use the following code blocks to expand and collapse the tree data on the grid:

At first, imports, definitions and assignments:

import { GridApi } from 'ag-grid-community';

then:

gridApi!: GridApi; // variable

constructor() {}

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  // other codes...
}


expand() {
  this.gridApi.expandAll();
}

collapse() {
  this.gridApi.collapseAll();
}

However if you want to collapse and expand a specific node level groups, you can use the following examples:

collapse2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 1) {
      node.setExpanded(false);
    }
  });
}

expand2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 2 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

collapse3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 2 && node.isExpandable) {
      node.setExpanded(false);
    }
  });
}

expand3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 3 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

Please check out this example that I created o Plnkr.