Can't get ui-grid to work in bootbox custom di

Question

I'm using AngularJS, UI-Grid (http://ui-grid.info/), and Bootbox for a project. What I'd like to do is have the user click a button on the screen, and bring up a dialog box where they select an item from a UI-Grid table.

I put together the simplest example I could make:
http://plnkr.co/edit/YvsiAQhUrNqnSse1O0oh?p=preview

In this, I generate the dialog box HTML like this:

var tplCrop = '<div ng-controller="MyTableDialogCtrl">{{ someText }}' +
        '<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>' +
        '</div>';
var template = angular.element(tplCrop);
var linkFn = $compile(template);
var html= linkFn($scope);

If you click the "My Dialog" button, a dialog comes up, and there is a region for the table, but it's empty. The "someText" value proves my Angular $compile is doing what it should.

If you uncomment the commented section, you'll see that the UI-Grid mechanics also seem to be working properly. But, for some reason, the UI-Grid doesn't want to render inside the dialog.

Any ideas? I'm really stumped.

Thanks, John

Answer 1

http://plnkr.co/edit/bbNVgwoTRtHZp3cKcoiB?p=preview

        onRegisterApi: function( gridApi ) {
          $scope.gridApi = gridApi;
          $timeout( function() {
            $scope.gridApi.core.handleWindowResize();
          }, 1000);
        }

In the modal tutorial it mentions that the bootstrap modals seem to run animations on initial render, and that this causes the grid problems with getting an accurate size.

I noted that in your plunker when I open the chrome debugger the grid shows up - indicating that it's a sizing issue of one sort or another.

I can get it to show in the above plunker by using a $timeout of 1s, and a handleWindowResize. Usually I can get away with a lot less than 1s, but in this case at 100ms it didn't work.

I'd have to say I'd be uncomfortable with a timeout this long, as it may turn out that different browsers and devices run different speeds, so you'll end up with an intermittent app. You could however consider a $interval that runs every 100ms for the first 3 seconds after window open.....that probably would cover most situations.