Geek Answers Handbook

Multiple slickGrid on jQuery tabs

I create several slickGrids and put them on the jQuery tab. The first slickGrid in the first jQuery tab works fine, but when I switch to the next tab, the data columns on slickGrid do not appear until you change the size of the header and the columns are not aligned to the header. Is there any way to fix this? here is my exerp code:

<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>
+7
source share
4 answers

Good. Well, I will try to break what is happening and why it does not work. Basically, what probably happens is that you customize your tabs before you initialize your slickgrid isntances. This is important to know because your second and third tabs are essentially given in a hidden state, and therefore your slickgrids are not initialized.

Try changing the order and see if this works. If this is not the case, I recommend placing your slickfgrid initializers in document.ready and your tab initializer in document.load. It is a bit hacked but gives good results.

Hope this makes sense.

+9
source

You must move the mesh load to the "show" event on the jQuery tab. I had to use these events instead of document.ready / load, because I have CSS tabs that do not display a single one to remove the “flash tab”, even if it happens correctly when the page loads and the tabs are 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; } } });
+3
source

It looks like you are probably struggling with the same problem that I am facing. JQuery's hidden tab behavior is done in slickgrid rendering on IE and chrome. FIrefox does it well. This is what I'm talking about - Make the following changes to jQuery UI CSS -

from

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

to

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

This is basically a recovery of my jquery code, this code is dynamically generated by 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>
0
source

More articles:


All Articles