Проблема размера ширины jqgrid в пользовательском контроле

Question

У меня есть jqgrid на третьей вкладке вкладки jquery ui сетка видна, но ее размер намного меньше ее обычного размера. У меня нет этой проблемы, когда я перемещаю сетку на первую вкладку. Я прочитал и знаю, что скрытые вкладки не отражают ширину и видели некоторые похожие проблемы, такие как эта: вкладки jqgrid и jquery: загрузка текста не скрывает

Я хотел бы загрузить свою сетку, когда третья вкладка нажата в select событие вкладок, так что jqgrid загружается с его оригинальным размером. Это мой код на странице управления пользователями, которая включает вкладки. Также следует добавить, что каждая вкладка имеет свою .ascx страница (я не знаю, если это имеет значение).

$(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>

Это не загружает мою сетку правильно, но строка предупреждения показывает, поэтому я уверен, что я введу это select событие. У кого-нибудь был такой опыт раньше? Любые другие советы будут оценены.

Спасибо

Answer 1

Это ответ, надеюсь, это поможет

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

});

Answer 2

Не уверен, что именно эти методы в вашем случае пытаются сделать точно (как просил Олег), но вы всегда можете просто настроить стили после загрузки сетки:

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