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 es with build in expand/collapse functionality.

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 es with build in expand/collapse functionality.

• javascript
• ag-grid

Share Improve this question Follow edited Oct 24, 2016 at 17:56 Jarod Moser 7,35822 gold badges2828 silver badges5555 bronze badges asked Oct 24, 2016 at 14:08 withoutdistractionwithoutdistraction 5111 gold badge11 silver badge44 bronze badges 2

• I assume you are trying to recreate row grouping (example) rather than column grouping (example) correct?... since column grouping is a part of the free version... – Jarod Moser Commented Oct 24, 2016 at 17:24
• @JarodMoser Correct, should work like the expanding/collapsing you see in that row grouping example. – withoutdistraction Commented Oct 24, 2016 at 17:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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 ponent:

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