problema de superposición jqGrid

Question

Llego al siguiente problema después de this post.

Después de cargar los datos, la superposición gris cubre todo en la página, pero los datos de la cuadrícula. El css div id responsable de eso es lui_list. ¿Alguna idea de como resolver esto?

Así es como me estoy quedando scirpt jqGrid:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery("#list").jqGrid({ 
      url: '/Ticket/All/', 
      datatype: 'json', 
      mtype: 'GET', 
      colNames: ['Id', 'Hardware', 'Issue', 'IssueDetails', 'RequestedBy', 'AssignedTo', 'Priority', 'State'], 
      colModel: [ 
      { name: 'Id', index: 'Id', key: true, width: 100 }, 
      { name: 'Hardware', index: 'Hardware', width: 100 }, 
      { name: 'Issue', index: 'Issue', width: 200 }, 
      { name: 'IssueDetails', index: 'IssueDetails', width: 200 }, 
      { name: 'RequestedBy', index: 'RequestedBy', width: 150 }, 
      { name: 'AssignedTo', index: 'AssignedTo', width: 150 }, 
      { name: 'Priority', index: 'Priority', width: 100 }, 
      { name: 'State', index: 'State', width: 100}], 
      pager: jQuery('#pager'), 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      sortname: 'Id', 
      sortorder: "desc", 
      viewrecords: true, 
      imgpath: '/Content/images/', 
      caption: 'My first grid' 
     }); 
    }); 
</script> 

<h2>My Grid Data</h2> 
<table id="list"></table> 
<div id="pager"></div> 

y HTML de cabecera:

<link href="/Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/ui.jgrid.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.5.custom.min.js"></script> 
<script type="text/javascript" src="/Scripts/grid.locale-en.js" ></script> 
<script type="text/javascript" src="/Scripts/jquery.jqGrid.min.js" ></script> 

se observará ninguna ayuda.

Answer 1

Has olvidado incluir el css-file-jqGrid específica! Después de incluir este archivo, se solucionó el problema.

Answer 2

No sé por qué la superposición se mantendrá exhibida después del final de la carga. Solo puedo suponer que utilizas algunas clases de CSS como "cargar" usadas también durante la carga de jqGrid. Independiente de la razón por la que puede solucionar el problema muy fácilmente. Usted sólo debe ocultar el div que corresponde con el siguiente código de ejemplo:

var grid_id = "list"; // jQuery("#list")[0].id; 
var hideLoading = function() { 
    jQuery("#lui_"+grid_id).hide(); 
    jQuery("#load_"+grid_id).hide(); 
} 

jQuery("#list").jqGrid({ 
    // all current options 
    loadComplete: function() { 
     hideLoading(); 
    }, 
    loadError: function() { 
     hideLoading(); 
    } 
});