JQGrid loading disables(grays out) JQuery UI tab -

Hi I'm currently using JQGrid inside a JQuery UI tab. My problem is that when I call it JQGrid Renderer, it is disabled (covered with diagonal straps).

  & lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ("# divTimePeriod") tab (); jQuery ("#listTimePeriod") jqGrid ({url: .. '/ TIMEPERIOD / GetTimePeriods', datatype: 'json', MTYPE : '' Receive ',' Columns: ',' TimePeriodKey '], colModel: [{name:' verb ', index:' verb ', width: 60, sortable: false} {name:' TimePeriodKey ', index: TimePeriodKey ', width: 55}], JsonReader: {Repeatitems: false, root: "results"}, pager:' #pagerTimePeriod ', viewrecords: true, GridComplete: function () {}});}); & Lt; / Script & gt;  

  & lt; H3 & gt; Time period service & lt; / H3 & gt; & Lt; Div id = "divTimePeriod" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# deadline" & gt; Time period & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#de type" & gt; Day type & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#interval" & gt; Interval group & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# calendar" & gt; Calendar & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "timeperiod" & gt; & Lt; Span & gt; Name: & lt; / Span & gt; & Lt; Select & gt; & Lt; Options & gt; & Lt; / Options & gt; & Lt; Options & gt; Mistake & lt; / Options & gt; & Lt; Options & gt; All & lt; / Options & gt; & Lt; Options & gt; From summer off / peak at & lt; / Options & gt; & Lt; / Select & gt; & Lt; Table ID = "List Timeparod" width = "100%" & gt; & Lt; / Table & gt; & Lt; Div id = "pager time period" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "dayType" & gt; & Lt;% HTMLRenderPartial ("~ / scene / datetype / contentsex"); & Gt%; & Lt; / Div & gt; & Lt; Div id = "interval" & gt; & Lt;% HTMLRenderPartial ("~ / scene / interval group / connectors.cssx"); & Gt%; & Lt; / Div & gt; & Lt; Div id = "calendar" & gt; Calendar & lt; / Div & gt; & Lt; / Div & gt;  

The grid correctly renders, but the tab is grayed out.

Thanks

Waiting until you start the tab before creating your jqGrid Will happen .

For example, you can enter your initialization code in the tab, so that unless the tab is ready it is not executed:

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