multiple slickGrid in jQuery tabs

Question

I am creating multiple slickGrids and puts them in a jQuery tab. The first slickGrid on the first jQuery tab works fine, but when I switch to the next tab the data columns on the slickGrid does not show up until you resize the header and the columns are not aligned to the header. Is there any way I can fix this? here's my code exerp:

<ul class="tabs">
     <li><a href="#tab_1">FADF Mono</a></li>
     <li><a href="#tab_2">BADF Mono</a></li>
     <li><a href="#tab_3">BADF Color</a></li>
</ul>
<div class="tab_container">
       <div id="tab_1" class="tab_content">
          <div id="slickGrid_1"></div>
       </div>
       <div id="tab_2" class="tab_content">
          <div id="slickGrid_2"></div>
       </div>
       <div id="tab_3" class="tab_content">
          <div id="slickGrid_3"></div>
       </div>
</div>

Answer 1

Okay. Well, I will try and break down what is going on and why it's nor working. Basically what is likely happening is that you are setting your tabs before you initialise your slickgrid isntances. This is important to know, because your second and third tabs are essentially given a hidden state and therefor your slickgrids are not initialising.

Try changing the order and see if that works. If it doesn't then I recommend putting your slickfgrid initializers into document.ready and your tab initializer into document.load. It's a little hacky, but yields good results.

Hope this makes sense.

Answer 2

You should move the grid loading into the "show" event of the jQuery tab. I had to use these events instead of document.ready/load because I have my tabs' CSS displayed none to remove the "tab flash" even that happens right as the page loads and the tabs are being initialized. Something like this is what I have:

    $('#tabs').tabs({
            fx: [
                    {opacity: 'toggle', duration: 'fast'},
                    {opacity: 'toggle', duration: 'fast'}
            ],
            show: function(event, ui) {
                    if($(ui.tab).text() == "grids" && !this.gloaded) {
                            grids.init();
                            this.gloaded = true;
                    }
            }
    });