How to make Angular grid ui expand all rows first?

I am using the ui grid to show a list of data, and I am trying to expand all rows first.

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 yet displayed.

+7
angularjs angular-ui angular-ui-grid
source share
5 answers

I find that I can expand all rows using the rowsRendered event:

 gridApi.core.on.rowsRendered(scope,() => { if (!gridApi.grid.expandable.expandedAll && !initialized) { gridApi.expandable.expandAllRows(); initialized = true; } }); 

I used a variable initialized for identification if these are the first lines that are displayed, since I only want to expand all the lines first.

+1
source share

In my case, it worked:

  $scope.gridOptions = { ... onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid.registerDataChangeCallback(function() { $scope.gridApi.treeBase.expandAllRows(); }); } }; 
+14
source share

None of the above worked for me in all cases of using the grid.

  $scope.gridApi.grid.registerDataChangeCallback(function() { if($scope.gridApi.grid.treeBase.tree instanceof Array){ $scope.gridApi.treeBase.expandAllRows(); } }); 

In each case that I tested, the following works. The DataChangeCallback is called twice (for an unknown reason) when the page loads. The first time gridApi.grid.treeBase.tree is the object that causes the problem with gridApi.grid.treeBase.tree.forEach above:

0
source share

None of these answers worked for me:

 scope.gridApi.core.on.rowsRendered(null, () => { scope.gridApi.treeBase.expandAllRows(); }); 
0
source share

I assume that you are using a grid, in which case you can use the groupsCollapedByDefault: false option to expand all elements in different ways.

-one
source share

All Articles