CODEWITHSUNDEEP
groupingangular-ui-gridexpand
amazonotter
amazonotter

Reputation: 61

UI-grid grouping auto expand

Does anybody know how to automatically expand a UI-grid that is performing a grouping? I need the grid to open up and start up with it being completely expanded.

Their API and Tutorial reference doesn't explain explicitly enough for me to understand.

My HTML div

<code>
&lt;div id="grid1" ui-grid="resultsGrid" class="myGrid" ui-grid-grouping&gt;&lt;/div&gt;
</code>

My Javascript 

    
    $scope.resultsGrid = {
      ,columnDefs: [
      { field:'PhoneNum', name:'Phone'},
      { field:'Extension', name:'Extension'},
      { name:'FirstName'},
      { field:'DeptDesc', grouping: {groupPriority: 0}} 
      ]
    ,onRegisterApi: function(gridApi)
      {
      $scope.gridApi = gridApi;
      }
    }

Upvotes: 4

Views: 5108

Answers (3)

Mohamed NAOUALI
Mohamed NAOUALI

Reputation: 2132

you just need to add 

//expand all rows when loading the grid, otherwise it will only display the totals only
      $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });

in your onRegisterApi: function(gridApi)that should be updated like this onRegisterApi: function(gridApi) so your function will be like this

$scope.resultsGrid.onRegisterApi = function(gridApi) {       
      //set gridApi on scope
      $scope.gridApi = gridApi;

      //expand all rows when loading the grid, otherwise it will only display the totals only
      $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });
    };

or you can add botton to expand data like shown in this plunker

Upvotes: 7

PaulL
PaulL

Reputation: 6650

The closest analogy would the selection tutorial, in which we select the first row after the data finishes loading: http://ui-grid.info/docs/#/tutorial/210_selection

$http.get('/data/500_complex.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
    $timeout(function() {
      if($scope.gridApi.selection.selectRow){
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
      }
    });
  });

The key understanding is that you can't select (or expand) data that hasn't been loaded yet. So you wait for the data to return from $http, then you give it to the grid, and you wait for 1 digest cycle for the grid to ingest the data and render it - this is what the $timeout does. Then you can call the api to select (or in your case, expand) the data.

So for you, you'd probably have:

$http.get('/data/500_complex.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
    $timeout(function() {
      if($scope.gridApi.grouping.expandAllRows){
        $scope.gridApi.grouping.expandAllRows();
      }
    });
  });

If you're on the latest unstable, that call will change to $scope.gridApi.treeBase.expandAllRows.

Upvotes: 0

amazonotter
amazonotter

Reputation: 61

My Module - I had to add ui.gridl.selection
<pre>
<code>
angular.module('ddApp',['ngRoute','ngSanitize','ngCookies','ngResource','ui.grid.selection'])
</code>    
</pre>

My Controller - Amongh the other Dependency Injected items, I also had to add $timeout
<pre>
<code>
    .controller('myCtrl', function(`$`timeout)){}
</code>
</pre>


<pre>
<code>
$timeout(function(){
    if($scope.gridApi.grouping.expandAllRows){
       $scope.gridApi.grouping.expandAllRows();
    }
});
</code>
</pre>

Upvotes: 0

Related Questions