Why did jqGrid disable the rest of my page?

Question

I have a jqGrid calling a controller action (returning JSON to jqGrid). When my grid gets populated, everything but the "table body" gets disabled, as if table body is shown via some modal window:

This is my js code to init the grid, and the html:

<head>
    <title>Insert</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" />    
    <script src="/Scripts/EditorHookup.js" type="text/javascript"></script>    
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

   <script type="text/javascript">
      var gridimgpath = '/content/themes/base/images';
      var gridDataUrl = '/Home/JsonPosloviForDate';
      var jsonDate =  "\/Date(1309816800000)\/";      
      var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));      
      $(function () {
         jQuery("#list").jqGrid({
            url: gridDataUrl + '?currDate=' + date.toJSON(),
            datatype: "json",
            mtype: 'GET',
            colNames: ['Šifra posla', 'Vrsta posla', 'Partner', 'Opis', 'Broj sati'],
            colModel: [
               { name: 'SifPosao', index: 'SifPosao', width: 50, align: 'left' },
               { name: 'kratVrstaPosao', index: 'kratVrstaPosao', width: 100, align: 'left' },
               { name: 'nazPartner', index: 'nazPartner', width: 100, align: 'left' },
               { name: 'opis', index: 'opis', width: 100, align: 'left' },
               { name: 'brSati', index: 'brSati', width: 100, align: 'left' },
                     ],
            rowNum: 20,
            rowList: [10, 20, 30],
            imgpath: gridimgpath,
            height: 'auto',
            width: '700',
            pager: jQuery('#pager'),
            sortname: 'SifPosao',
            viewrecords: true,
            sortorder: "desc",
            caption: "Poslovi"
         });
      }); 
   </script>
  
</head>
<body>
...    
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
...   
</body>

score 5 · Accepted Answer · edited May 23 '17 at 10:29

5

There are loadui parameter of jqGrid which allow you to manage how the grid will be blocked. You can try to use loadui:'disable' to verify that it is the problem which you has.

Nevertheless the behavior which you describe seems me strange. jqGrid uses <div> as overlay and the div has additional class with the name 'loading'. You should verify your CSS whether you have name conflict and use the same class name for another purpose.

By the way I recommend you to review the jqGrid parameters and HTML markup which you use.

The parameter imgpath will be not used since version 3.5 of jqGrid (see here). Do you really use a retro version of jqGrid? If not you should remove imgpath.
You should remove property align: 'left' from colModel because the default value of align is already 'left' (see here)
You should remove class="scroll" cellpadding="0" cellspacing="0" from the <table id="list"> and class="scroll" style="text-align:center;" from the <div id="pager">. the settings was needed in "retro" versions of jqGrid, but not now (see here an HTML example).
It is better to use pager: '#pager' instead of pager: jQuery('#pager').
Instead of constructing url: gridDataUrl + '?currDate=' + date.toJSON() it is better to use two parameters: url: gridDataUrl and postData: {currDate: date.toJSON()} or event better postData: {currDate: function() { return date.toJSON(); } }. In case of usage of functions inside of postData the value of the property will be evaluated on every grid load/refresh (see here for more information). If you do want construct url manually like yoou currently do you need use encodeURIComponent or jQuery.param: url: gridDataUrl + '?currDate=' + encodeURIComponent(date.toJSON()) or url: gridDataUrl + '?' + jQuery.param({currDate:date.toJSON()}).
you should never use eval.

UPDATED: I didn't found in the example which you send the jqGrid CSS. If I replace the block with all CSS and JavaScript files with the following lines

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js"></script>

the described problem is not exist.

edited May 23 '17 at 10:29

Community

1
1

answered Jul 05 '11 at 10:59

Oleg

220,925
34
403
798

First of all, thank you for the comprehensive answer. Unfortunatelly, I had no luck. I've done everything you said. Changed my HTML ids, removed all other CSS, still the same. I've experimented with loadui but it doesn't seem to make any difference. The behaviour is the same in IE9, FF and Chrome :(. Although, sometimes the pager gets enabled and when I move to next page it disables and everything is "locked up" then. Firebug shows no bugs, no errors in the console, GET requests are returning proper JSON (that indeed get rendered). – igorludi Jul 05 '11 at 11:55
@user819023: If you have the page online and post me the url I could look at it and try to find the reason. If you have overlay during the initial loading of grid data even if you use `loadui:'disable'`, than the overlay should probably come not from jqGrid. Which other plugins you use on the same page? – Oleg Jul 05 '11 at 11:59
I just deployed it to: http://161.53.18.3:81/temp (I've changed Site.css to Site123.css (not existing) on purpose.) – igorludi Jul 05 '11 at 12:49
@igorludi: Sorry, but I can't access the URL now. Is is still active? – Oleg Jul 05 '11 at 14:56
Even better, I' ve made a local array version. You can download it from here: https://rapidshare.com/files/1162739957/debuggrid.zip One remark thought: The rowcount/pager is not accurate, but this way pager get enabled(?) Just delete rows 21, 22... in the temp.htm to see the pager disabled too. Thanks for staying on this... – igorludi Jul 06 '11 at 08:10
@igorludi: The link which you send me don't permit to download the file without registration including the payment. It would be easier if you just send it me per email: oleg.kiriljuk@ok-soft-gmbh.com – Oleg Jul 06 '11 at 09:58
It's not really so, you should just close the payment dialog and hit the "FREE DOWNLOAD". I'm writing this for others, and I'll also send it to you to you email. – igorludi Jul 06 '11 at 11:32
1

@igorludi: I updated my answer. In the list of files which you sent there are no jqgrid.css. Instead of that there are strange `Site123.htm` file as CSS. All JavaScript files are renamed, so it is difficult to analyse it. If one remove all JavaScript and CSS files which you use and include only the files which are needed all work without any problem. – Oleg Jul 06 '11 at 12:08
1

So I was missing a single CSS. Thanks Oleg. – igorludi Jul 06 '11 at 12:16
I bet the css missing was the jqgrid one. I got the same issue. – Matthieu Oct 13 '11 at 14:28
@Matthieu: Missing of either `jquery-ui.css` or `ui.jqgrid.css` follows to serious problems. Both CSS are really required. – Oleg Oct 13 '11 at 14:38
@Oleg: true but testing it a bit got me to 'ui.jqgrid.css' missing => greyed out page till begining of grid, 'jquery-ui.css' missing => ugly grid without theming. Makes it easier to find the culprit :) – Matthieu Oct 13 '11 at 14:44

score 4 · Answer 2 · answered Dec 21 '12 at 12:17

4

I had the same problem and added

<link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" />

now works

answered Dec 21 '12 at 12:17

kgrzanka

41
1

Why did jqGrid disable the rest of my page?

2 Answers2