title: Collapsible rows in AngularJS ng-Grid
body: <p>I want ng-Grid to have collapsible rows. </p>
  
  <p>My javascript :-</p>
  
  <pre><code>var app = angular.module('myApp', ['ngGrid']);
  app.controller('MyCtrl', function($scope) {
  $scope.myData = [{name: "aaa", age: 50, designation: "TR", quotes: "some text"},
                   {name: "aaa", age: 43, designation: "PR", quotes: "some text"},
                   {name: "aaa", age: 27, designation: "Architech", quotes: "some text"},
                   {name: "aaa", age: 29, designation: "Intern", quotes: "some text"},
                   {name: "aaa", age: 34, designation: "HOD", quotes: "some text"},
                   {name: "aaa", age: 34, designation: "TR", quotes: "some text"}];
  
  $scope.expandOperator = false
  $scope.expandableButton = '&lt;button ng-show="expandOperator" ng-click="expandOperator = false"&gt;-&lt;/button&gt;&lt;button ng-show="!expandOperator" ng-click="expandOperator = true"&gt;+&lt;/button&gt;'
  $scope.expandableRow = '&lt;div ng-if="expandOperator" {{myData.quotes}}&lt;/div&gt;'
  $scope.nameField = '&lt;div&gt;{{myData.name}}&lt;div ng-show="expandOperator"&gt;{{myData.quotes}}&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
  $scope.editableInPopup = '&lt;button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" &gt;Edit&lt;/button&gt;
  $scope.designationDropDown = '&lt;select name="designations"&gt;&lt;option value="TR"&gt;TR&lt;/option&gt;&lt;option value="PR"&gt;PR&lt;/option&gt;&lt;option value="HOD"&gt;HOD&lt;/option&gt;&lt;option value="SE"&gt;SE&lt;/option&gt;&lt;option value="Intern"&gt;Intern&lt;/option&gt;&lt;/select&gt;'
  $scope.$on('ngGridEventRowSeleted',function(event,row){
      $scope.selectedRow=row;
  });
  $scope.gridOptions = { 
      data: 'myData',
  
      rowTemplate: '&lt;div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(),\'height\': \'150px\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell&gt;&lt;/div&gt;',
  
      columnDefs: [{field:'expand', displayName:'Expand', cellTemplate:$scope.expandableButton},{field:'name', displayName:'Name', enableCellEdit: true, cellTemplate:$scope.nameField}, {field:'age', displayName:'Age', enableCellEdit: true}, {field:'designation', displayName:'Designation', enableCellEdit: true}, {displayName:'Update',cellTemplate:$scope.editableInPopup, enableCellEdit:false}],
  
      showGroupPanel: true,
  
      selectedItems: $scope.selectedElements,
  
      multiSelect: false
  
  };
  
  });
  </code></pre>
  
  <p>I have loaded all scripts in my html file but still the collapsibility is not there. Although The name field of the grid doesn't render correctly(values are missing).</p>
  
  <p>Also in Chrome console I'm getting the following errors/warnings:-</p>
  
  <pre><code>Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider &lt;- $animate
  http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=%24animateProvider%20%3C-%20%24animate angular.js:78
  Attr.specified is deprecated. Its value is always true. angular.min.js:39
  event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 
  </code></pre>
  
  <p>can someone guide me how to enable collapsible rows in ng-grid.</p>