uncaught exception: jqGrid - No such method: GridU

Question

THE PLAN

I have a page with a jqGrid on it - this grid should be able to load one of three json payloads that are of the same type - just different filters. The data that loads is based on the button one clicks (In Planning, Approved, Completed).

THE PROBLEM

The problem I am having is when I reference $("#jobGrid").jqGrid('GridUnload'); I get an "uncaught exception: jqGrid - No such method: GridUnload".

THE CODE

The following libraries are loaded - basically I grabbed them all trying to get $("#jobGrid").jqGrid('GridUnload'); to fire

<!-- jqGrid Resources-->    
<script type="text/ecmascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/js/i18n/grid.locale-en.js"></script> 
<script type="text/ecmascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.base.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.common.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.jqueryui.js"></script>
<script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/plugins/grid.addons.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn.cov.com/jqGrid_JS_5.0.0/css/ui.jqgrid-bootstrap.css" />

JavaScript function where exception occurs. Note: When this method is fired, data already exists in the grid

// Approved Filter
var approvedFilter = function () {
     // Ready Up Defaults
     $.jgrid.defaults.width = $("#jobGridContainer").width();
     $.jgrid.defaults.responsive = true;

     // Reset Data (Grid has data in it already
     $("#jobGrid").jqGrid('GridUnload'); 

     $("#jobGrid").jqGrid({
          url: RestService.GetApprovedJobsService(),
          mtype: "GET",
          styleUI: 'Bootstrap',
          datatype: "json",
          colModel: [
              { label: 'JobNumber', name: 'JobNumber', key: true, width: 75 },
              { label: 'Job Name', name: 'JobName', width: 150 },
              { label: 'Request State', name: 'JobState', width: 150 },
              { label: 'Status', name: 'JobStatus', width: 150 },
              { label: 'Request By', name: 'JobRequestor', width: 150 },
              { label: 'Last Modified', name: 'LastModifiedDate' }
          ],
          viewrecords: true,
          height: 375,
          rowNum: 10,
          loadonce: true,
          pager: "#jqGridPager",
          caption: "Showing Approved Requests. Click row to view details",
          onSelectRow: function (rowid, selected) {
              if (rowid != null) {
                  document.location.href = getAppRootUrl() + "/Service/Job/" + rowid;
              }
          }

     });
}

Any suggestions or help would be greatly appreciated

Answer 1

You use Guriddo jqGrid JS which have some incompatibility with previous versions of jqGrid (see the release notes of Guriddo jqGrid JS 4.8 for more information). Another fork of jqGrid - free jqGrid don't have the problem with GridUnload method.

If you need to use GridUnload or GridDestroy in Guriddo jqGrid JS then you can't use more $("#jobGrid").jqGrid('GridUnload');. Instead of that you should use

$.jgrid.gridUnload("jobGrid"); // id of grid as parameter 

Another common remark to your code. You included first jquery.jqGrid.min.js and then grid.base.js, grid.common.js and other. It's wrong. jquery.jqGrid.min.js includes all the modules in minimized form. It's wrong to include the same modules multiple times.

Answer 2

For whatever reason Guriddo decided remove $("#gridid").jqGrid("GridUnload") from the new grid. For us it created an upward compatibility issue, especially since the jQuery element is passed as a parameter. We have elected to just put it back using the following code on startup.

if ($.fn.jqGrid["GridUnload"] === undefined) {
    $.fn.jqGrid["GridUnload"] = $.jgrid.gridUnload;
}