216_expandable_grid.ngdoc

@ngdoc overview
@name Tutorial: 216 Expandable grid
@description

<div class="alert alert-warning" role="alert"><strong>Alpha</strong> This feature is in development. There will almost certainly be breaking api changes, or there are major outstanding bugs.</div>

The `ui.grid.expandable` module adds the subgrid feature to grid. To show the subgrid you need to provide following grid option:

Documentation for the expandable feature is provided in the api documentation, in particular:

- {@link api/ui.grid.expandable.api:GridOptions gridOptions}
- {@link api/ui.grid.expandable.api:PublicApi publicApi}

<pre>
  $scope.gridOptions = {
    //This is the template that will be used to render subgrid.
    expandableRowTemplate: 'expandableRowTemplate.html',
    //This will be the height of the subgrid
    expandableRowHeight: 140,
    //Variables of object expandableScope will be available in the scope of the expanded subgrid
    expandableRowScope: expandableScope
  }
</pre>

expandableRowTemplate will be the template for subgrid and expandableRowHeight will be the height of the subgrid. expandableRowScope can be used
to add variables to the scope of expanded grid. These variables can then be accessed from expandableRowTemplate. The grid api
provides the following events and methods for subGrids:

<pre>
    //rowExpandedStateChanged is fired for each row as its expanded:
    gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
    });
    //Following methods can be used to expand/ collapse all rows of the grid:
    gridApi.expandable.expandAllRows();
    gridApi.expandable.collapseAllRows();
</pre>

SubGrid nesting can be done upto multiple levels.

In addition to the above configuration, 'scrollFillerClass' is also available and can be used to style the scroll filler. The scroll filler
appears when you quickly scroll through the grid.

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.expandable.min.js"></script>
  <script src="/release/ui-grid.selection.min.js"></script>
  <script src="/release/ui-grid.pinning.min.js"></script>
</pre>

@example
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

    app.controller('MainCtrl', function MainCtrl($http, $log) {
      var vm = this;

      vm.gridOptions = {
        expandableRowTemplate: 'expandableRowTemplate.html',
        expandableRowHeight: 150,
        //subGridVariable will be available in subGrid scope
        expandableRowScope: {
          subGridVariable: 'subGridScopeVariable'
        }
      };

      vm.gridOptions.columnDefs = [
        { name: 'id' },
        { name: 'name'},
        { name: 'age'},
        { name: 'address.city'}
      ];

      $http.get('/data/500_complex.json')
        .then(function(response) {
          var data = response.data;

          for(i = 0; i < data.length; i++){
            data[i].subGridOptions = {
              columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
              data: data[i].friends
            };
          }
          vm.gridOptions.data = data;
        });

        vm.gridOptions.onRegisterApi = function(gridApi){
          vm.gridApi = gridApi;
        };

        vm.expandAllRows = function() {
          vm.gridApi.expandable.expandAllRows();
        };

        vm.collapseAllRows = function() {
          vm.gridApi.expandable.collapseAllRows();
        };

        vm.toggleExpandAllBtn = function() {
          vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
        };
    });

    app.controller('SecondCtrl', function SecondCtrl($http, $log) {
						var vm = this;

						vm.gridOptions = {
								enableRowSelection: true,
								expandableRowTemplate: 'expandableRowTemplate.html',
								expandableRowHeight: 150
						}

						vm.gridOptions.columnDefs = [
								{ name: 'id', pinnedLeft:true },
								{ name: 'name'},
								{ name: 'age'},
								{ name: 'address.city'}
						];

						$http.get('/data/500_complex.json')
								.then(function(response) {
										var data = response.data;

										for(i = 0; i < data.length; i++) {
												data[i].subGridOptions = {
														columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
														data: data[i].friends
												};
										}
										vm.gridOptions.data = data;
								});
				});

    app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
						var vm = this;

						vm.gridOptions = {
								expandableRowTemplate: 'expandableRowTemplate.html',
								expandableRowHeight: 150,
								onRegisterApi: function (gridApi) {
										gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
												if (row.isExpanded) {
														row.entity.subGridOptions = {
																columnDefs: [
																{ name: 'name'},
																{ name: 'gender'},
																{ name: 'company'}
														]};

														$http.get('/data/100.json')
																.then(function(response) {
																		row.entity.subGridOptions.data = response.data;
																});
												}
										});
								}
						};

						vm.gridOptions.columnDefs = [
								{ name: 'id', pinnedLeft:true },
								{ name: 'name'},
								{ name: 'age'},
								{ name: 'address.city'}
						];

						$http.get('/data/500_complex.json')
								.then(function(response) {
										vm.gridOptions.data = response.data;
								});
				});

    app.controller('FourthCtrl', function FourthCtrl($http, $log) {
						var vm = this;

						vm.gridOptions = {
								enableRowSelection: true,
								expandableRowTemplate: 'expandableRowTemplate.html',
								expandableRowHeight: 150
						};

						vm.gridOptions.columnDefs = [
								{ name: 'id', pinnedLeft:true },
								{ name: 'name'},
								{ name: 'age'},
								{ name: 'address.city'}
						];

						$http.get('/data/500_complex.json')
								.then(function(response) {
										var data = response.data;

										for(i = 0; i < data.length; i++) {
												data[i].subGridOptions = {
														columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
														data: data[i].friends,
														disableRowExpandable : (i % 2 === 0)
												};
										}
										vm.gridOptions.data = data;
								});
				});
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as main">
      <div class="control-group">
        <button id="toggleVisibility" type="button" class="btn btn-sm btn-default" ng-click="main.toggleExpandAllBtn()">Toggle Expand All Visibility</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.expandAllRows()">Expand All</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.collapseAllRows()">Collapse All</button>
      </div>
      <div id="grid1" ui-grid="main.gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>
    Expandable rows works with checkboxes from selection and left pins
    <div ng-controller="SecondCtrl as second">
       <div ui-grid="second.gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
    </div>
    Retrieve data for subGrid when expanding
    <div ng-controller="ThirdCtrl as third">
       <div ui-grid="third.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
    Toggle expand subGrid control
    <div ng-controller="FourthCtrl as fourth">
       <div ui-grid="fourth.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 100%;
      height: 400px;
    }
  </file>
  <file name="expandableRowTemplate.html">
    <div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>
  </file>
  <file name="scenario.js">
      var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'),
        GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'),
        grid1 = new GridObjectTest('grid1');

      describe('216 Expandable Grid', function() {
        // Reload the page before each test if on Firefox. Chrome does it automatically.
        gridTestUtils.firefoxReload();

        it('should load the header values should be as expected', function() {
          grid1.expectHeaderColumns(['Id', 'Name', 'Age', 'Address.City']);
        });

        describe('Toggle Expand All Visibility', function() {
          var expandAllButton, emptyCellContent;

          it('should display the expand all button by default', function() {
            expandAllButton = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-icon-button') );
            expect(expandAllButton.isDisplayed()).toBe(true);
          });
          it('should hide the expand all button when the Toggle Expand All Visibility button is clicked', function() {
            element( by.id('toggleVisibility') ).click();

            emptyCellContent = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-cell-empty') );
            expect(emptyCellContent.isDisplayed()).toBe(true);
          });
        });
      });
  </file>
</example>