Here is a code example:

Hope this will help someone.

Is it possible that in the latest jqgrid release, the grid width calculation mecanism has changed?

This would explain why the jquery.tabs events trick is not working.

Any idea?

Thanks.

I had the same problem sanchitos had and I tried solving it with what is explained here. However, I still have the same problem.

I am using jquery-ui tabs and a jqgrid in each tab.

Each grid has the autowidth property set to true in order to have the same width as the parent tab.

I am only creating a tab's grid on its first selection in order for the width calculation to work correctly.

However, only the first tab gets its jqgrid's width set correctly to the tab width.

Here is the code I use:

HTML:

JS:

Where creategrid1 and creategrid2 are the fonctions that create the grids.

The thing is the grids are created normally only on their tab's first selection, but only the first grid has a width equal to the tab width.

Both grids use the following parameters:

• autowidth: true

• shrinkToFit: false

I would really appreciate any help.

Thanks!

Also maybe you should look into the code connected with the tabs creation/removing again

If the tab is removed the grid is removed too, since the grid element is a child of the tab div.

Will try to help if you provide a link to the problem.

Best Regards

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!

I think the problem is how you construct your tabs. Also if the grid exists you should not do anything, the tabb UI just show this content. You can look into the demo how is this organized.

Best Regards

Tony

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" });

}

Mark

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

Mark

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

Resize functions that i made

http://www.trirand.com/blog/?p.....id/#p10996

You can attach it on the same tab event.

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:

 - you can add your own css to make the hidden tab content visible, but offscreen:

- you can defer creating the grids until their tabs are selected (use the tabselect event).

Where mygridcreatefn creates the grid for the selected tab if it doesnt already exist.

Mark

I have two tabs on a page with jqgrids on each one.

Both jqgrids have autowidth property set, the problem is when page loads the first grid is adjusted to the size of the container but when i clicked the second tab the second grid is not adjusting to the size of the container.

Code:

   jQuery(document).ready(function() {
        jQuery(NOMBRE_GRID).jqGrid({
            url: '/Idiomas/DatosGrid/',
            datatype: 'json',
            mtype: 'GET',
            height: 'auto',
            multiselect: true,
           
            autowidth: true,           
            colNames: ['Id',  'Nombre'],
            colModel: [
                      { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                          formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                      },
                      { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                  ],
            pager: jQuery(NOMBRE_AREA_PAGINACION),
            rowNum: tamanoPagina,
            rowList: [5, 10, 15, 20],
            sortname: 'nombre',
            sortorder: "asc",
            viewrecords: true,           
            caption: 'Idiomas'
        }).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false });
    });
       
    jQuery(document).ready(function() {
        jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({
            url: '/Idiomas/DatosGrid/',
            datatype: 'json',
            mtype: 'GET',
            height: 'auto',
            multiselect: true,
           
            autowidth: true,           
            colNames: ['Id',  'Nombre'],
            colModel: [
                      { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                          formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                      },
                      { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                  ],
            sortname: 'nombre',
            sortorder: "asc",
            viewrecords: true,           
            caption: 'Idiomas'
        });
     });

Html:

<div id="tabs">   
        <ul>
            <li><a href="#tab-1">TAB1</a></li>
            <li><a href="#tab-2">TAB2</a></li></ul>
        <div id="tab-1">
           <table id="Integra2_Lista" cellpadding="0" cellspacing="0">
            </table>
            <div id="Integra2_Paginacion" class="scroll" style="text-align: center;">
            </div>
        </div>
        <div id="tab-2">
            <table id="Integra2_SeleccionadosLista" cellpadding="0" cellspacing="0">
            </table>

        </div>
    </div>

Thank you guys, any guess, what might be happening, how can i fix it or if it's just a normal behavior.