Create tree in angular-grid (ag-grid) with async data loading

Question

I am trying to use angular-grid (ag-grid) to display a tree like in the example provided in the documentation:

http://www.angulargrid.com/example-file-browser/index.php

In the given example, all the data is already provided. How do I use async data loading when a row group is expanded? My guess is that i need to write my own group row renderer.

Answer 1

I came recently to the same problem in my React.js app and found solution. It's similar to what @leden posted but I found solution how to maintain current row expansions between table rows update.

The solution is as follow:

1. Add dummy child row for each top-level row. Can be empty or can have loading... string for example in first column.

2. On event getNodeChildDetails, which is called each time you update your table rowData, you can specify if a row should be expanded or not. So the idea is that we keep track of what is expanded and what is not.

   getNodeChildDetails = (rowItem) => {
     if (rowItem.children) {
       return {
         group: true,
         expanded: rowItem.id in this.expandedRows,
         children: rowItem.children,
       };
     }
     else {
       return null;
     }
   };
   

3. On event rowGroupOpened we keep track which rows are expanded.

   rowGroupOpened = (param) => {
     const id= param.node.data.id;
   
     if(!param.node.expanded) {
       delete this.expandedRows[id];
       return;
     }
   
     this.expandedRows[id] = true;
   
     if (param.node.data.children.length !== 1) { // Here we need to check if only dummy row is present
         return;
       }
   
       this.api.showLoadingOverlay();
   
       // Here I simulate fetching data from server
       setTimeout(() => {
         this.rowData.forEach((e) => {
           if (e.id == id) {
             e.children = [
               // Add  fetch rows
             ]
           }
         });
   
         this.api.setRowData(this.rowData); // Setting data, will trigger getNodeChildDetails call on each row
         this.api.hideOverlay();
       }, 1000);
     };
   

Answer 2

The grid doesn't support lazy loading of the tree data out of the box. So yes you would have to write your own cellRenderer to achieve this.

PS I'm the author of ag-Grid, so you can take this answer as Gospel!