Ui-grid disappears in angular-ui-tab

Question

I've ui-grids in angular-ui-tabs, they are inside an ng-if to avoid rendering issues. If there is more data and the grid goes into scrolling mode, the data disappears completely when clicking the tabs. I believe this is an ui-grids-bug - can anyone help me here?

Plunkr: http://plnkr.co/edit/kDlS4zEPE0A0DrUHn0CJ?p=preview

I'm not entirely sure, but maybe the viewport/size of browser window has an effect.

Code is as one would expect:

<uib-tabset justified="true">
    <uib-tab heading="tab" select="setTab('test')">
        <div class="row">
            <div class="col-md-12" ng-if="test">
                <div id="grid1" ui-grid="{ data: myData }" class="grid">
                </div>
            </div>
        </div>
    </uib-tab>
    <uib-tab heading="tab" select="setTab('test2')">
        <div class="row">
            <div class="col-md-12" ng-if="test2">
                <div id="grid2" ui-grid="{ data: myData2 }" class="grid">
                </div>
            </div>
        </div>
    </uib-tab>
</uib-tabset>

Update:

I implemented an $interval as described here. Unfortunately it doesn't work - here is the plunkr: http://plnkr.co/edit/1d2UTOMl3bvtYHr7muTf?p=preview.

Not entirely sure if I implemented it right though, I did

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

        // call resize every 200 ms for 2 s after modal finishes opening - usually only necessary on a bootstrap modal
        $interval( function() {
            console.log('in');
            $scope.gridApi.core.handleWindowResize();
            }, 10, 500);
        },
data: [....

and in the HTML

<div id="grid1" ui-grid="myData" class="grid"></div>

What's very strange: In my local code it's always the second tab that disappears, never the first (the first is rendered properly). And the second tab always just shows the first 4 items - so it's not entirely gone. This all looks like I messed up my code on first sight, but if I switch the grids (put the grid from tab 2 into tab 1 and vice versa) it's again the first one that renders perfectly and the second one that just shows the first four items.

Update 2:

I implemented @imbalind 's solution (thanks again), looks like I’m having some other issues here. I assume there is some other library conflicting and it appears to me that ng-repeat gets somehow terminated in the second grid. The ui-grid-canvas div-container is actually very large, but empty except for the first four items.

Tried hard to investigate with other library it might could be, but I can’t find out. Guess I’ll have to work around with ng-views and “faking” the tabs, although it’s ugly.

Answer 1

This problem is quite known (even though only referred to uib-modal inside of docs) and inside this tutorial they explain how to address it: you should add a $interval instruction to refresh the grid for some time after it's updated in order to let the tab take its time to load and render.

The code should be as follows:

$scope.tabs[0].gridOptions.data = data; 
$interval( function() {
  $scope.gridApi1.core.handleWindowResize();
}, 10, 500);

Where gridApi1 are created inside of a regular onRegisterApi method.

You can take a look at the code in the tutorial to get a better understanding if needed.