ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: jeetmarwah on May 28, 2015, 12:27:13 am

Title: Multiple Tabs having Multiple Grids Issue
Post by: jeetmarwah on May 28, 2015, 12:27:13 am

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 (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.

Title: Re: Multiple Tabs having Multiple Grids Issue
Post by: paramvir on May 28, 2015, 11:17:30 pm

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

Title: Re: Multiple Tabs having Multiple Grids Issue
Post by: jeetmarwah on May 29, 2015, 12:29:00 am

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.

Title: Re: Multiple Tabs having Multiple Grids Issue
Post by: jeetmarwah on May 29, 2015, 12:31:25 am

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.

Title: Re: Multiple Tabs having Multiple Grids Issue
Post by: jeetmarwah on June 03, 2015, 05:56:28 am

Anyone who can help me with this issue???

Title: Re: Multiple Tabs having Multiple Grids Issue
Post by: paramvir on June 03, 2015, 07:19:56 am

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.
}