JQGrid loading is disabled (gray). JIQuery UI Tab

Question

Hi, I am using JQGrid inside the jQuery UI tab. My problem is that when I invoke the JQGrid render, it turns off (crossed 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 displays correctly, but the tab remains unavailable.

thanks

Answer 1

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

For example, you can put your initialization code on the show event tab so that it does not execute until the tab is ready:

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