grid collapse with expandable open

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  $scope.gridOptions = {
    expandableRowTemplate: '<div ui-grid="row.entity.subGridOptions" style="height:140px;"></div>',
    expandableRowHeight: 150,
    //subGridVariable will be available in subGrid scope
    expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    }
  }

  $scope.gridOptions.columnDefs = [ { field: 'id', name: 'id1', width:100 },
    { field: 'name', name: 'name1', width:100 },
    { field: 'gender', name: 'gender1', width:100 },
    { field: 'age', name: 'age1', width:100 },
    { field: 'company', name: 'company1', width:100 },
    { field: 'email', name: 'email1', width:100 },
    { field: 'phone', name: 'phone1', width:100 },
    { field: 'address.street', name: 'address.street1', width:200 },
    { field: 'address.city', name: 'address.city1', width:200 },
    { field: 'address.state', name: 'address.state1', width:200 },
    { field: 'address.zip', name: 'address.zip1', width:200 },
    { field: 'guid', name: 'guid1', width:100 },
    { field: 'isActive', name: 'isActive1', width:100 },
    { field: 'balance', name: 'balance1', width:100 },
    { field: 'id', name: 'id1', width:100 },
    { field: 'name', name: 'name2', width:100 },
    { field: 'gender', name: 'gender2', width:100 },
    { field: 'age', name: 'age2', width:100 },
    { field: 'company', name: 'company2', width:100 },
    { field: 'email', name: 'email2', width:100 },
    { field: 'phone', name: 'phone2', width:100 },
    { field: 'address.street', name: 'address.street2', width:100 },
    { field: 'address.city', name: 'address.city2', width:100 },
    { field: 'address.state', name: 'address.state2', width:100 },
    { field: 'address.zip', name: 'address.zip2', width:100 },
    { field: 'guid', name: 'guid2', width:100 },
    { field: 'isActive', name: 'isActive2', width:100 },
    { field: 'balance', name: 'balance2', width:100 },
  ];
  
  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      for(i = 0; i < data.length; i++){
        data[i].subGridOptions = {
          columnDefs: [
            { name:"Id", field:"id", width: 100 },
            {name:"Name", field:"name", width: 100 }
          ],
          data: data[i].friends
        }
      }
      $scope.gridOptions.data = data;
    });

    $scope.gridOptions.onRegisterApi = function(gridApi){
      $scope.gridApi = gridApi;
    };
}]);

.grid {
  width: 100%;
  height: 400px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>