How to make Angular ui grid expand all rows initially? - angularjs

Question

I am using ui grid to show a list of data and I am trying to initially expand all rows.
I am trying to do this in the onRegisterApi event:
scope.GridOptions =
{
data: properties,
columnDefs:
[
{ name: "Full Address", field: "FullAddress" },
{ name: "Suburb", field: "Suburb" },
{ name: "Property Type", field: "PropertyType" },
{ name: "Price", field: "Price", cellFilter: 'currency'},
{ name: "Status", field: "Status" },
{ name: "Sale Type", field: "SaleType" },
{ name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
],
expandableRowTemplate: 'template.html',
expandableRowHeight: 200,
onRegisterApi: (gridApi) =>
{
scope.gridApi = gridApi;
gridApi.expandable.on.rowExpandedStateChanged(scope,(row) =>
{
if (row.isExpanded) {
this.scope.GridOptions.expandableRowScope = row.entity;
}
});
gridApi.expandable.expandAllRows();
}
};
But the code above does not work. It looks like when I call expandAllRows() the rows are not rendered yet.

Answer 1

In my case, the following worked:
$scope.gridOptions = {
...
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerDataChangeCallback(function() {
$scope.gridApi.treeBase.expandAllRows();
});
}
};

Answer 2

I find I can expand all rows by using rowsRendered event:
gridApi.core.on.rowsRendered(scope,() => {
if (!gridApi.grid.expandable.expandedAll && !initialized)
{
gridApi.expandable.expandAllRows();
initialized = true;
}
});
I have used a variable initialized to identify if this is the first time rows are rendered as I only want to expand all rows initially.

Answer 3

None of the above worked for me for all of my grid use cases.
$scope.gridApi.grid.registerDataChangeCallback(function() {
if($scope.gridApi.grid.treeBase.tree instanceof Array){
$scope.gridApi.treeBase.expandAllRows();
}
});
The following works in every case I have tested. DataChangeCallback is called twice (for some unknown reason) on initial page load. The first time, gridApi.grid.treeBase.tree is an object which causes the issue with gridApi.grid.treeBase.tree.forEach above:

Answer 4

None of these answers worked for me, the following did:
scope.gridApi.core.on.rowsRendered(null, () => {
scope.gridApi.treeBase.expandAllRows();
});

Answer 5

The following worked for me, but no guarantee that it won't break anything... (looks good in my tests):
You need to change the source code, for example in ui-grid.js, i.e. the one your are deploying with your app:
In the addOrUseNode: function(...) inside the createTree: function(...) simply change COLLAPSED to EXPANDED for newNodes:
addOrUseNode: function (grid, row, parents, aggregationBase) {
...
var newNode = { state: uiGridTreeBaseConstants.EXPANDED, row: row, parentRow: null, aggregations: newAggregations, children: [] };
...
}
In module.service('uiGridTreeBaseService'... initializeGrid: function(grid) set grid.treeBase.expandAll from false to true (to let the tree know that all rows are expanded on initialitation)
[looks this is optional for the treeView]: Do the same In module.service('uiGridExpandableService', ['gridUtil', function (gridUtil) {...} in initializeGrid: function (grid). Change grid.expandable.expandedAll from false to true