jQuery Grid Plugin - jqGrid

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() {

    var grid_exists=0;

    $("#navmenu").tabs({
        load: function(event, ui) {
                 if (ui.index==0)  { // only show grid in first tab
                    if (grid_exists)  {
                        alert('grid exists'); // test if this works, it does, how can I show the grid then?
                    }
                    else  {
                        volunteer_grid();
                        grid_exists = 1;
                    }
                }
                else {
                     // do nothing for now
                }

})

    $("#navmenu").tabs('add', 'index.php/volunteer/show_list', 'Lijst');
    $("#navmenu").tabs('add', 'index.php/volunteer/show_form', 'Form');
    $("#navmenu").tabs('option', 'ajaxOptions', { type: "POST" });

}

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. If the tab does not exists, an ajax request is sent to the server which returns the html of the associated url. The html includes a script tag which defines the grid with the data.

This looks very simple and it works perfectly .

This is my application:

I have a main menu in the left pane with. Just ordinary links, but prettified with jquery and ajax requests.

Each time a menu item is clicked, a tab navigation should show on top of the right pane with a grid in the first tab. Tabs can be added or removed by clicking on rows of the grid.

When another menu item is clicked, all existing tabs and grids should be removed to make place for a new tab and new grids.

Is it better to keep the main tab navigation and remove all tabs?

Should I keep the grids when another main menu item is clicked? I don't think so, as I want to empty the tabs on clicking a main menu item.

Is the grid completely removed if the tab is closed?

What am I doing wrong with my tab creation?

Could you please help me out with this one? What is the best way to do this in terms of architecture? I really want to avoid design flaws.

Thank you very much!