The default for tabs is that hidden tabs get “display:none”. The result of that is that the container size is reported as zero.

So when the grid in the hidden container initializes, /its/ container has zero size, and it sizes itself accordingly.

You have a couple of options:

I better to create grid when the tab is selected.

Use tabs event: http://docs.jquery.com/UI/Tabs#event-show

Resize functions that i made

Forum

You can attach it on the same tab event.

It'll do that if you create it every time the tab is selected.

I recommend creating it once, the first time its selected, and never again…

Mark

Well, use the tabselect event, and keep a flag to say whether or not you've created the grid…

Mark

Hi markw65 and others,

Do you accidentally have an example of this?

I've created a page with 2 tabs, one with a grid, the other with a form.

When the page is loaded, I run a function to create the tabs and grid. The grid is shown first and is ok. When I click on the Form tab, the form shows. Going back to the Grid tab, I does not show anything. I am probably making a very stupid mistake.

I tried another solution from the forum but #volunteer_grid does not exist, looking in the generated html, I see grod_volunteer_grid. What is this about, am I missing something.

Off topic, sorry for that, I was able to do grid resizing with window resizing, how do I do that with jquery tabs?

function volunteer_tabs_and_grid() {

Hi Tony,

Thanks for your answer. I am not a js and jquery specialist but am eager to learn.

I looked at the code of the demo site with FireBug as you suggested and I think I figured out what you do:

1) The main tab is created with an add event function defined (for closing tabs)

2) A treeGrid is created for the main menu with an associated url for every leaf of the tree (eg jsonex.html)

3) An onSelectRow event callback is created: On selection of a leaf of the treeGrid, the existence of the tab associated with the leaf is checked.

Im using tabs as well except I've created a seperate file for my grid and I use the ajax option in jquery tabs to display the grid.