Multiple Tabs having Multiple Grids Issue

[jeetmarwah]

Hi,

I am very new to Javascript and JQuery. So please excuse me if my UI design is very primitive. It will be great if someone can suggest and help me learn this JS skill.

Here is my challenge.
I have 3 tabs and I want to have grid on each one. But the data on Grid 2 does not show data after you click away from it.

Steps:
-----------
load the html page
click on Grid 2
Click on Grid 1 --> you will still see the data
Click on Grid 2 again --> Grid shows with no data.

I was not able to upload the example here due to size restrictions of 192kb. Please download and unzip the example using this URL.

https://drive.google.com/file/d/0B2DirYn9ksAfeTN5YU44RGxWVTg/view?usp=sharing

Unzip and double click on the husky.html

Please feel free to ask any questions and give your valuable suggestions/feedback/ideas.

Thanks.

[paramvir]

ParamQuery grid ( a javascript control ) can't render itself properly when it's parent ( i.e., inactive tab) is hidden. It's also been answered earlier in the forum:

Whenever you want to display grids in the tabs, make sure to use the activate event of the tab to refresh corresponding grid.

http://api.jqueryui.com/tabs/#event-activate

http://paramquery.com/api#method-refresh

[jeetmarwah]

As per your suggestion, I implemented the api and I think I am making a mistake somewhere as I get this error.

Code: [Select]

Uncaught Error: cannot call methods on pqGrid prior to initialization; attempted to call method 'refresh'

Here is the snippet of my code:

Code: [Select]

$(document).ready(function() {

$("#tabs").tabs({
activate: function(event, ui) {
alert("Activate event fired for #tabs");
debugger;
$( "#tabs" ).pqGrid( "refresh" );
}
});

$("#tabs").on("tabsactivate", function(event, ui) {
$( "#tabs" ).pqGrid( "refresh" );
});
});



Please suggest.
Thanks.

[jeetmarwah]

Also, you mentioned that this issue was answered before in the forum. I have looked a lot and could not find it. Can you please paste the url for that post that has the solution?

Thanks.

[jeetmarwah]

Anyone who can help me with this issue???

[paramvir]

You can't call pqGrid methods on tabs and vice versa.

activate: function(event, ui) {
               alert("Activate event fired for " + ui.newPanel);
          debugger;
               //$( "#tabs" ).pqGrid( "refresh" ); // this is incorrect.

               ui.newPanel.find( ".pq-grid" ).pqGrid( "refresh" ); //correct one.
}