jqgrid width size problem in usercontrol

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

What you want achieve with the statements `$("#list")[0].grid.hDiv.reloadGrid` or `$("#list")[0].grid.reloadGrid`? To reload the grid you need do something like `$("#list").trigger("reloadGrid")`. — Oleg, Sep 28 '11 at 19:03
I was trying to reload the grid once the tab was clicked and it did not work I did try the $("#list").trigger("reloadGrid") but it did not work so finally I found $("#tabstest").tabs( "load" , 2 ) and it loads when the tab is clicked, thank you for your answer. — Sue, Sep 29 '11 at 17:32

score 1 · Answer 1 · answered Sep 28 '11 at 21:04

Not sure what those methods in your case are trying to do exactly (as Oleg asked) but you could always just adjust the styles after the grid has loaded:

$(document).ready(function () {
    $("#tabstest").tabs({
        "select": function (event, ui) {
            switch (ui.index) {
            case 2:         
                $('#grid').css('width', '100%');  // Something like this
                break;
            }
        }
    });
});

score 0 · Accepted Answer · answered Sep 29 '11 at 17:37

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

});

jqgrid width size problem in usercontrol

2 Answers2