ag-grid - expanding/collapsing tree data

Question

I'm using ag-grid (free) with Angular 1 and I've already gotten my tree data to display as desired, where the children of a node are in the column to the right of it. However, what I want to do is collapse or expand nodes on double click. Right now just focusing on getting them to collapse since my default view is set to expand. here's my code for the double click event, given within $scope.gridOptions:

onCellDoubleClicked: function(event){ 
                                      event.node.expanded = false;
                                      $scope.gridOptions.api.refreshView();
                                     };

My assumption was that changing the expanded property to false would cause the refreshView call to re-render the grid with child nodes collapsed, but the view is unchanged after the double click.

Also, my getChildNodeDetails within gridOptions:

getNodeChildDetails: function(obj){
                if (obj.children){
                    var nodeType = obj.breakdownCol;
                    return {
                        group: true,
                        expanded: obj.expanded || true,
                        children: obj.children,
                        field: 'name',
                        key: obj[nodeType]
                    }
                } else {
                    return null;
                }
            }

Any ideas on how I might fix this without buying enterprise? I know that in enterprise you can group the rows and this comes with build in expand/collapse functionality.

Answer 1

In my own application I created a work around that simulates the row grouping feature. What it really does is adds and removes the data from the grid.

One drawback that this option has is that since the rows aren't actually in the table any filtering or sorting on columns can't actually take place on data that isn't shown, unlike the actual enterprise feature that the grid offers. However if you have disabled filtering and sorting then this option is perfectly viable.

Something like this:

function toggleExpansion(index, data) {
    if (insert) {
        gridOptions.api.insertItemsAtIndex(index, data);
    } else {
        gridOptions.api.removeItems(data)
    }
}

My specific code goes into more checks and other things unrelated to this question but that is the simple explanation of what I am doing as a work around.

Answer 2

I am using React, but you could probably do something similar with Angular:

function expandAll(expand) {
  agGridRef.current.api.forEachNode((node) => {
    node.setExpanded(expand);
  });
}

where the agGridRef is a reference to the component:

<AgGridReact
  ref={agGridRef}
.
.
.
</AgGridReact>