110_grid_in_modal.ngdoc

@ngdoc overview
@name Tutorial: 110 Grid in a Modal
@description

Using a grid in a modal popup.

In some cases, and in particular with the bootstrap modal, you may find that your grid renders smaller than the
available width (or sometimes appears to render not at all.  This is believed to be because the bootstrap modal
animates the initial render and the grid renders whilst the  modal is still animating - the available space isn't
as expected.  You can correct this by calling `handleWindowResize`.  The animation time seems to be somewhat variable,
so the currently recommended approach is to use $interval, and to call every 500ms for the first 5s after modal opening.

In a sense this is similar to what the auto-resize feature does, but it only does it for a short period after modal opening.

$ctrlFor better performance with the following example, you can choose to load the ui-grid.core.js file instead:
     <pre>
       <script src="/release/ui-grid.core.min.js"></script>
     </pre>

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

    app.controller('MainCtrl', ['$rootScope', '$scope', '$http', 'modal', '$interval', function ($rootScope, $scope, $http, modal, $interval) {
      var myModal = new modal();

      $scope.hideGrid = true;

      $rootScope.gridOptions = {
        onRegisterApi: function (gridApi) {
          $scope.gridApi = gridApi;

          // call resize every 500 ms for 5 s after modal finishes opening - usually only necessary on a bootstrap modal
          $interval( function() {
            $scope.gridApi.core.handleWindowResize();
          }, 500, 10);
          }
      };

      $http.get('/data/100.json')
        .then(function(response) {
          $rootScope.gridOptions.data = response.data;
        });

      $scope.showModal = function() {
        myModal.open();
      };
    }]);

    app.factory('modal', ['$compile', '$rootScope', function ($compile, $rootScope) {
      return function() {
        var elm;
        var modal = {
          open: function() {

            var html = '<div class="modal" ng-style="modalStyle">{{modalStyle}}<div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" class="grid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Close</button></div></div></div></div>';
            elm = angular.element(html);
            angular.element(document.body).prepend(elm);

            $rootScope.close = function() {
              modal.close();
            };

            $rootScope.modalStyle = {"display": "block"};

            $compile(elm)($rootScope);
          },
          close: function() {
            if (elm) {
              elm.remove();
            }
          }
        };

        return modal;
      };
    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <button id="showButton" class="btn btn-success" ng-click="showModal()">Show Modal</button>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 300px;
      height: 250px;
    }
  </file>
  <file name="scenario.js">
    // TODO: Fix this test. It is currently causing other tests to fail.
    /*var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
    var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
    var grid1 = new GridObjectTest('grid1');

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

      it('click modal button, grid should show with three columns and some data', function () {
        element( by.id ( 'showButton' ) ).click();
        grid1.expectHeaderColumnCount( 3 );
        grid1.expectRowValuesMatch( 0, [ 'Ethel Price', 'female', 'Enersol' ]);
        element( by.id ( 'buttonClose' ) ).click();
      });
    });*/
  </file>
</example>