jqgrid inside a jquery dialog only showing border of grid on the jqgrid header row

[Gefallene]

jqgrid inside a jquery dialog only showing border of grid on the header row (columns) but not on the data rows. The border stops after the header row of the jqgrid. Any ideas? My Div to hold the grid:\[code\]<!-- Div used for the JQuery modal dialog to show the volume driver information --><div id="dialog-div" title="Generated Budget Results"> <table id="grGrid"> </table> <div id="grpager" style="text-align: center;"></div></div>\[/code\]I construct the dialog and then the grid inside dialog when a users clicks on a cell in my master grid with the following code:\[code\]// If user clicks row, then display the volume driver viewonCellSelect : function(rowid, iCol, cellcontent) { var $myGrid = jQuery("#sreqGrid"); // Get the store name for the row number clicked on curStoreName = $myGrid.jqGrid("getCell", rowid, 'Depot'); // Get the Labor Budget ID for the row number clicked on curLaborBudgetID = $myGrid.jqGrid("getCell", rowid, 'LaborBudgetID'); // Get the column name for the cell clicked on var cm = $myGrid.jqGrid("getGridParam", "colModel"); cmName = cm[iCol].name; var charexist = cmName.indexOf('!'); if ( charexist > 0 ) { var cat_subcat = cmName.split('!'); $("#dialog-div").dialog({ resizable: true, height: '500', width : '750', position : 'center', //autoOpen: true, open: function (event, ui) { // Since the default close icon is not an X, I hide the icon for now $(".ui-dialog-titlebar-close", $(this).parent()).hide(); populateGeneratedResults(curStoreName, curLaborBudgetID, cat_subcat[0], cat_subcat[1]); }, buttons: { "Close": function () { $(this).dialog("close"); } } }); }},\[/code\]My code to construct the grid:\[code\]var fixGridWidth = function (grid) { var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; var mainWidth = jQuery('#sreqGrid').width(); var gridScrollWidth = grid[0].scrollWidth; var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode); var scrollWidth = gridScrollWidth; if (htable.length > 0) { var hdivScrollWidth = htable[0].scrollWidth; if ((gridScrollWidth < hdivScrollWidth)) scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth) } if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) { var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth, mainWidth) // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth if (newGridWidth != gviewScrollWidth) { grid.jqGrid("setGridWidth", newGridWidth-100); } }};var fixGridHeight = function (grid) { var gviewNode = grid[0].parentNode.parentNode.parentNode; //var gview = grid.parent().parent().parent(); //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv"); var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode); if (bdiv.length) { var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight; var height = grid.height(); if (delta !== 0 && height && (height-delta>0)) { grid.setGridHeight(height-delta); } }};var fixGridSize = function (grid) { this.fixGridWidth(grid); this.fixGridHeight(grid);};//==================================================================================================================// setup the grDataGridvar grDataGrid = "";var grStoreNameSelected = "";var grCategorySelected = "";var grSubCategorySelected = "";// Populate the generated results dialog gridfunction populateGeneratedResults (sLocation, sLaborBudgetID, sCategory, sSubCategory){ grStoreNameSelected = sLocation; grCategorySelected = sCategory; grSubCategorySelected = sSubCategory; $.getJSON("@Url.Content("~/LaborBudgets/LaborBudgets/GetGeneratedListofVolDrivers")", {LaborBudgetID:sLaborBudgetID,Category:sCategory,SubCategory:sSubCategory}, function (data) { // Populate the dialog grid data grDataGrid = JSON.stringify(data); $("#grGrid").GridUnload(); BuildgrGrid(); $("#grGrid").sortGrid('VolumeDriver', false, 'asc'); } );}// Build the generated results volume driver grid for the dialogfunction BuildgrGrid(){ jQuery("#grGrid").jqGrid({ datatype: 'jsonstring', datastr: grDataGrid, // Define the column headers colNames: [ '', 'Volume Driver', 'Volume Forecast', 'Category', 'Sub-Category', 'Hours', 'FTE Count' ], // Define the columns and their properties colModel: [ { name: 'LaborBudgetID', index: 'LaborBudgetID', title: false, hidden: true, width: 10, sortable:false }, { name: 'VolumeDriver', index: 'VolumeDriver', title: false, hidden: false, width: 100, sortable:false, align:'left' }, { name: 'Forecast', index: 'Forecast', title: false, hidden: false, width: 50, formatter:'number', formatoptions: {decimalPlaces:1, thousandsSeparator: ','}, sortable:false, align:'right' }, { name: 'Category', index: 'Category', title: false, hidden: true, width: 100, sortable:false, align:'left' }, { name: 'SubCategory', index: 'SubCategory', title: false, hidden: true, width: 100, sortable:false, align:'left' }, { name: 'HrsGen', index: 'HrsGen', title: false, hidden: false, width: 50, formatter:'number', formatoptions: {decimalPlaces:1, thousandsSeparator: ','},sortable:false, align:'right' }, { name: 'FTECount', index: 'FTECount', title: false, hidden: false, width: 40, formatter:'number', formatoptions: {decimalPlaces:1, thousandsSeparator: ','},sortable:false, align:'right' } ], // Enable the pager pager: jQuery('#grpager'), jsonReader: { repeatitems: false }, // Enable autowidth of grid autowidth: true, //width: 832, height: 300, //scrollOffset: 20, sortname: 'VolumeDriver', sortorder: "asc", pgbuttons: false, pgtext:null, viewrecords: false, // Enable the highlighting of rows when hovering hoverrows: false, // Add the title bar to grid caption: 'Depot : ' + grStoreNameSelected + " for ( " + grCategorySelected + " " + grSubCategorySelected + " )", // Hide the collapse icon on the title bar hidegrid:false, // When grid complete then select the first row in the list //gridComplete: function() { jQuery("#keynav").jqGrid('bindKeys');}, beforeSelectRow: function (rowid, e) { return false; }, // FROM THE WEB : Fix the modal dialogs height and width loadComplete: function() { var gr = jQuery('#grGrid'); fixGridSize(gr); } }); // Setup the navigation bar on bottom of grid jQuery("#grGrid").navGrid('#grpager', { // There are the predefined navigation buttons that can be enabled edit:false, add:false, del:false, refresh:false, search:false } ,{},{},{},{} );} // End of ConstructgrGrid\[/code\]