JQGrid loading disables(grays out) JQuery UI tab

Question

Hi,

Hi I am currently using JQGrid inside a JQuery UI Tab. My problem is that when I call the render JQGrid it disables(Grayed out with diagonal stripes).

<script type="text/javascript">
    $(document).ready(function () {
        $("#divTimePeriod").tabs();

        jQuery("#listTimePeriod").jqGrid({
            url: '/TimePeriod/GetTimePeriods',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['', 'TimePeriodKey'],
            colModel: [
          { name: 'Actions', index: 'Actions', width: 60, sortable: false },
          { name: 'TimePeriodKey', index: 'TimePeriodKey', width: 55 },
        ],
            jsonReader: {
                repeatitems: false,
                root: "result"
            },
            pager: '#pagerTimePeriod',
            viewrecords: true,
            gridComplete: function () {

            }

        });
    });
</script>

<h3>Time Period Service</h3>
<div id="divTimePeriod">
    <ul>
        <li><a href="#TimePeriod">Time Period</a></li>
        <li><a href="#DayType">Day Type</a></li>
        <li><a href="#Interval">Interval Group</a></li>
        <li><a href="#Calendar">Calendar</a></li>
    </ul>

    <div id="TimePeriod">
       <span>Name: </span> <select><option></option><option>Default</option><option>All</option><option>Summer Off/On Peak</option></select>
        <table id="listTimePeriod" width="100%"></table> 
        <div id="pagerTimePeriod"></div>
    </div>
    <div id="DayType">
        <% Html.RenderPartial("~/Views/DayType/Contents.ascx"); %>
    </div>
    <div id="Interval">
        <% Html.RenderPartial("~/Views/IntervalGroup/Contents.ascx"); %>
    </div>
    <div id="Calendar">
        Calendar
    </div>
</div>  

The grid renders correctly but the tab remains grayed out.

Thanks

Answer 1

You need to wait until the tab is initialized before creating your jqGrid.

For example, you can place your initialization code in the tab's show event, so that it is not executed until the tab is ready:

$("#divTimePeriod").tabs({
   show: function(event, ui) { 
     if (ui.index == 0){ // First tab is shown...
        // Initialize your jqGrid here
     }
   }
});