Clever Geek Handbook

Automatic deployment of UI grouping

Does anyone know how to automatically expand a UI grid that does grouping? I need a grid to open it up and start by expanding it fully.

Their API reference and tutorial is not explicitly explained for understanding.

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;
      }
    }
+3


source to share


3 answers


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 yours onRegisterApi: function(gridApi)

, which should be updated like this onRegisterApi: function(gridApi)

so that your function is 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 for data extension as shown in this plunker

+5


source


The closest analogy would be a selection tutorial where we select the first row after the data has finished 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 main thing is that you cannot select (or expand) data that has not yet been loaded. So you wait for data from $ http to return, then you pass it to the grid and you wait 1 digest cycle for the grid to ingest the data and display it - that's what the $ timeout does. Then you can call the api to fetch (or, in your case, expand) the data.



So, for you there is probably:

$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 are on the last volatile, this call will change to $scope.gridApi.treeBase.expandAllRows

.

0


source 


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>
0


source






More articles:


All Articles