jQuery Grid Plugin - jqGrid

The background screen for the web application is being hidden when the jqGrid dialog displays.  

The clicks a link (not a jqGrid) that displays a jqGrid list generated by the code below.  While the grid is loading, I can see the browser contents, the frame of the grid with 'Loading...' displayed, but then the screen contents go blank (gray) and the list data displays in the grid frame correctly.  

Is this a bug, feature or some configuration item I missed?

Code:

function OpenChooseLot(snapShotId, startingDate, forecastYear, blendCd, gradeType, gradeCd, gradeDesc) {

var urlGetModel = '<%:Url.Action("GetColumnNamesAndModel", "Substitution")%>';

var urlGetLots = '<%:Url.Action("GetLots", "Substitution")%>';

$.ajax({

url: urlGetModel,

type: 'GET',

success: function (jsonString) {

var jsonObject = jQuery.parseJSON(jsonString);

var colNames = jsonObject.colNames; // ['Grade Desc', 'Useable Date', 'Nicotine']

var colModel = jsonObject.colModel; // [{ name: 'GRADE_DESC' }, { name: 'USEABLE_DATE' }, { name: 'Nicotine'}]

var params = "snapShotId=" + encodeURIComponent(snapShotId) +

"&startingDate=" + encodeURIComponent(startingDate) +

"&forecastYear=" + encodeURIComponent(forecastYear) +

"&blendCd=" + encodeURIComponent(blendCd) +

"&gradeType=" + encodeURIComponent(gradeType) +

"&gradeCd=" + encodeURIComponent(gradeCd) +

"&gradeDesc=" + encodeURIComponent(gradeDesc);

var urlEncoded = urlGetLots + "?" + params;

$("#tableLots").jqGrid('GridUnload'); // force grid data to be unloaded

$("#tableLots").jqGrid({

url: urlEncoded,

type: 'GET',

datatype: 'json',

colNames: colNames,

colModel: colModel,

jsonReader: { repeatitems: true, id: "0", cell: "", root: "rows", page: "page", total: "total", records: "records" },

pager: '#tableLots_pager',

height: 300,

rowNum: 20,

rowList: [10, 20, 50],

caption: 'Lots for substitution',

scrollrows: true,

onSelectRow: function (rowid, status) {

//alert("onSelectRow fired for id: " + rowid + " with status: " + status);

var grid = jQuery("#tableLots");

var rowData = grid.getRowData(rowid);

var gradeDescNew = grid.getCell(rowid, 0);

// make the Change button request a substitution for the specified data

$("#tableLots_Change").button({ disabled: false });

var newControllerPath = '<%= Url.Action("UpdateBlendMix", "Substitution")%>';

var newParams = "snapShotId=" + encodeURIComponent(snapShotId) +

"&startingDate=" + encodeURIComponent(startingDate) +

"&year=" + encodeURIComponent(forecastYear) +

"&blend=" + encodeURIComponent(blendCd) +

"&oldGradeDesc=" + encodeURIComponent(gradeDesc) +

"&newGradeDesc=" + encodeURIComponent(gradeDescNew);

$("#tableLots_Change").attr("onclick", "location.href="" + newControllerPath + "?" + newParams + """);

}, //end-onSelectRow

loadComplete: function (data) {

if (data.rows.length > 0) {

for (var i = 0; i < data.rows.length; i++) {

if (data.rows[i][0] == gradeDesc) {

$('#tableLots').jqGrid('setSelection', i, false); // make the row [i] selected, but do not fire the onSelectRow event

$('#tableLots_Change').button({ disabled: true }); // or .button("enable") or .button("disable") after initialization

} //end-if

} //end-for

} //end-if data.rows.length

} //end loadComplete

}); //end-jqGrid

}, //end-success

error: function (result) {

alert("Error in OpenChooseLots: " + result);

} //end-error

}); //end-ajax

$("#divChooseLot").dialog({ modal: true });

$("#divChooseLot").dialog("open");

} //end-function