Grid doesn't display inside Tabs

[ghelobytes]

I'm having trouble displaying the grid when placed inside tabs. The tabs by the way are tabset from Angular UI Bootstrap.

One thing I noticed is that when a browser viewport resize happens (displaying dev console or when displayed inside an iframe that was resized) the grid starts to render properly.

The issue is demonstrated here: http://plnkr.co/edit/T7kQLHiqcxQ8X9uS2Bmr?p=preview
Note that when you start resizing the preview window, the grid inside the tab starts to render.
But when you switched tabs, same issue manifests again.

[PaulL1]

The usual cause of this is rendering the grid inside the tab when the tab is still hidden.

The canonical answer is to use an ng-if on the tab based on tab.active. So the grid only tries to render when someone actually clicks on the tab (this also has the advantage of improving your application performance - angular won't be trying to evaluate all the watches for the grids that aren't visible).

(and I think you forgot to save your plunker - that plunker has no tabs in it).

[ghelobytes]

Thanks for the prompt reply @PaulL1. I updated (and saved) the plunker to show 3 scenarios: Inside a single tab, inside 2 tabs, and outside tabs.
I expected I didn't need any ng-if if I am displaying the grid in a single tab only. Is that a reasonable expectation?

[PaulL1]

It ties back to http://ui-grid.info/docs/#/tutorial/108_hidden_grids. If the grid isn't visible then it doesn't render cleanly. Basically the tab is doing an ng-show, and the grid doesn't really like living in an ng-show.

The easiest workaround is the ng-if, then you're not taking the grid load on your system unless the user clicks on the tab. The second-best is to let them click on the tab, put a timeout in, and call gridApi.core.handleWindowResize().

[ghelobytes]

@PaulL1 thank your for pointing out that document. It makes more sense to me now. Will use ng-if as you suggested.

[PaulL1]

Often that's an angular digest cycle thing - so the tabShown is getting set and the grid is getting shown, but the tab hasn't rendered yet. We tend to use $timeout liberally for that - but always without a time associated with it (so we're just using it to run after the digest cycle completes).

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

[ghelobytes]

@PaulL1 I deleted previous comment because I made additional test and it seems now ng-if works on angular 1.3.x if width is set initially: http://plnkr.co/edit/ks2n9k4MTOa69q2PLbdY?p=preview
Of course the $timeout approach works too.

[pcr1393]

@PaulL1 Your solution of calling gridApi.core.handleWindowResize() worked like a charm. I put it in ng-click of the Accordion that i had used

<uib-accordion-group is-open="status.isEngMetOpen" ng-click="gridApi.core.handleWindowResize()">