0

I have some tabs in YUI3 Tabview. Each tab contains a couple of YUI3 Scrollable Datatables. The datatables are created but are not rendered. All I can see is a part of 1st column of each datatable.

Howeveer, if I resize the browser window, I can see the tables rendered. I suspect that I have to somehow re-render the tables each time I switch to a different tab. How can I do this?

The datatables are created independent of Tabs/Tabview.

Any help would be greatly appreciated.

the-petrolhead
  • 597
  • 1
  • 5
  • 16

1 Answers1

0

Yes, scrolling DataTables need to be in a visible container when rendered because they need to calculate the size of some elements of the table, which they can't do if they are under display: none in a hidden tab. The way to avoid this is to wait until the tab that will hold the datatable is shown. You can do that by listening to the "after" stage of the selectedChange event of the Tab. For example:

tabview.item(1).after('selectedChange', function (e) {
  if (e.newVal) {
    table.render();
 }
});

Here's a working example: http://jsfiddle.net/juandopazo/H2ASR/2/

juandopazo
  • 6,283
  • 2
  • 26
  • 29
  • Each tab contains multiple tables. I don't have specific table instance like the one you specified in the example. What can I do to overcome this? – the-petrolhead Nov 20 '12 at 12:53
  • Basically you need to get all your table instances and call `render()` only after the `selectedChange` event. You can ignore the `this.get('panelNode')` part. I removed it from the answer just in case – juandopazo Nov 20 '12 at 13:15