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>

score 9 · Accepted Answer · answered Jan 24 '11 at 02:42

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.

score 3 · Answer 2 · answered Jan 24 '11 at 23:22

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;
                    }
            }
    });

score 1 · Answer 3 · answered Dec 20 '12 at 17:26

Seems like you possibly are struggling with the same issue i was running into. Jquery tabs hiding behavior runs into slickgrid rendering on IE and chrome. FIrefox renders it fine. This is what I'm talking about - Make the following modification to jquery UI CSS -

from

.ui-tabs .ui-tabs-hide { display: none !important; }

to

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

score 0 · Answer 4 · edited Nov 07 '11 at 18:31

this basically is a code reconstruction of my jquery, this code is dynamically generated by a php code.

    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

    });
    </script>
    <script>
var grid_1;     
var columns_1 = [           
{id:"title", name:"Title", field:"title"},          
{id:"duration", name:"Duration", field:"duration"},         
{id:"%", name:"% Complete", field:"percentComplete"},           
{id:"start", name:"Start", field:"start"},          
{id:"finish", name:"Finish", field:"finish"},           
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}        
];

var options_1 = {           
enableCellNavigation: false,          
enableColumnReorder: false      
};

$(function() {         
var data_1 = [];            
for (var i = 0; i < 500; i++) {             
data[i] = {                 
title: "Task " + i,                  
duration: "5 days",                  
percentComplete: Math.round(Math.random() * 100),                 
 start: "01/01/2009",                  
 finish: "01/05/2009",                   
effortDriven: (i % 5 == 0)             
 };         
}

grid_1 = new Slick.Grid($("#slickGrid_1"), data_1, columns_1, options_1);       
})      
</script>

<script>        
var grid_2;     
var columns_2 = [           
{id:"title", name:"Title", field:"title"},          
{id:"duration", name:"Duration", field:"duration"},         
{id:"%", name:"% Complete", field:"percentComplete"},           
{id:"start", name:"Start", field:"start"},          
{id:"finish", name:"Finish", field:"finish"},           
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}        
];      
var options_2 = {           
enableCellNavigation: false,           
enableColumnReorder: false      
};

$(function() {          
var data_2 = [];            
for (var i = 0; i < 500; i++) {             
data[i] = {                   
title: "Task " + i,                   
duration: "5 days",                  
percentComplete: Math.round(Math.random() * 100),                   
start: "01/01/2009",                  
finish: "01/05/2009",                   
effortDriven: (i % 5 == 0)              
 };         
}           
grid_2 = new Slick.Grid($("#slickGrid_2"), data_2, columns_2, options_2);       
})      
</script>

<script>        
var grid_3;     
var columns_3 = [       
{id:"title", name:"Title", field:"title"},          
{id:"duration", name:"Duration", field:"duration"},         
{id:"%", name:"% Complete", field:"percentComplete"},           
{id:"start", name:"Start", field:"start"},          
{id:"finish", name:"Finish", field:"finish"},           
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}        
];

var options_3 = {           
enableCellNavigation: false,          
enableColumnReorder: false      
};

$(function() {         
var data_3 = [];            
for (var i = 0; i < 500; i++) {             
data[i] = {                   
title: "Task " + i,                   
duration: "5 days",                   
percentComplete: Math.round(Math.random() * 100),                  
start: "01/01/2009",                  
finish: "01/05/2009",                   
effortDriven: (i % 5 == 0)               
 };         
}
grid_3 = new Slick.Grid($("#slickGrid_3"), data_3, columns_3, options_3);
})
</script>

multiple slickGrid in jQuery tabs

4 Answers4