jqGrid overlay problem

Question

I come to next problem after this post.

After loading data, gray overlay covers everything on page, but grid data. The css div id responsible for that is lui_list. Any idea, how to solve this?

That's how I'm running jqgrid scirpt:

<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>

And html header:

<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>

Any help will be appreciated.

score 34 · Accepted Answer · answered Nov 11 '10 at 21:20

34

You have forgotten to include the jqgrid-specific css-file! After including this file your problem is solved.

answered Nov 11 '10 at 21:20

hagen

356
2
2

Wow. I feel stupid for not seeing that. Thank you for the help. – JasCav Feb 01 '11 at 21:52
frickin a that was annoying. not used to a missing .css file causing a gray overlay to appear. – whitneyland May 17 '12 at 23:31
This solved my problem better than figuring out why the "hideloading" method above wouldn't work. Glad I scrolled down... Thanks, @hagen ! – Tym Pollack Jun 22 '13 at 19:19
I've beean banging my head to frustration because of that gray overlay. Thanks! – Bnrdo Feb 21 '14 at 09:57
I don't understand! What is the jqgrid-specific file? Isn't this ui.jgrid.css? I've included it and it still hasn't fixed my problem. – Mark Rucker Mar 12 '15 at 08:04

score 10 · Answer 2 · answered Oct 29 '10 at 14:50

10

I don't know why the overlay will stay displayed after the end of loading. I can only suppose that you use some CSS classes like "loading" used also during loading of jqGrid. Independent from the reason you can fix the problem very easy. You should just hide the corresponding div with the following code for example:

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();
    }
});

answered Oct 29 '10 at 14:50

Oleg

220,925
34
403
798

Hi Oleg. Thanks again for your help. This indeed solves the problem. I will vote up, but wait with marking as answer - maybe somebody else will be able to find problem with overlay not hiding automatically. – mlusiak Oct 29 '10 at 15:02
@kMike For me, the problem with the overlay began when I upgraded from jQuery 1.4.1 to 1.5.2. I was on version 3.6.4 of jqGrid and didn't have time to switch to 4.0.0. Oleg's fix worked for me. – grahamesd Apr 27 '11 at 19:22

jqGrid overlay problem

2 Answers2

Linked