Question

I have a jqgrid in the third tab of a jquery ui tab, the grid is visible but the size is much smaller than its usual size. I dont have this problem when I move the grid to the first tab. I read and know that the hidden tabs are not reflecting the width and have seen some similar issues like this one: jqgrid and jquery tabs : loading text doesn't hide

I would like to load my grid when the third tab is clicked in the select event of the tabs so the jqgrid is loaded with its original size.
This is my code in the usercontrol page that includes the tabs. I should also add that each tab has its own .ascx page (I dont know if this makes a difference).

$(document).ready(function () {
    $("#tabstest").tabs({
        "select": function (event, ui) {
            switch (ui.index) {
            case 2:         
                alert(" this is the test cases ");
                $("#list")[0].grid.hDiv.reloadGrid;
                $("#list")[0].grid.reloadGrid;
                break;
            }
        }
    });
});

---

<div id="tabstest">
    <ul>
        <li><a href="#tabs-1">first</a></li>
        <li><a href="#tabs-2">second</a></li>
        <li><a href="#tabs-3">Third </a></li>
    </ul>


    <div id="tabs-1">
        <% Html.RenderPartial("First", ViewData);  %>            
    </div>

    <div id="tabs-2">
        <% Html.RenderPartial("second");  %>            
    </div>

    <div id="tabs-3">
        <% Html.RenderPartial("Third");  %>            
    </div>


</div>

It is not loading my grid correctly, but the alert string shows so I am sure I enter this select event. Has anyone had this experience before? Any other tips will be appreciated.

Thanks

Answer 1

This is the answer, I hope it helps

$(document).ready(function () { 
$("#tabstest").tabs({ 
    "select": function (event, ui) { 
        switch (ui.index) { 
        case 2:          
           $("#tabstest").tabs( "load" , 2 )
            break; 
        } 
    } 
}); 

});