Question

Using jQGrid v4.2 and jQuery 1.8 I cant get search to work. When I click the search button nothing happens…

The reason I’m using v4.2 is because its the latest version of the jqgrid nuget package (annoyingly the author hasn’t updated it).

Does anyone have a workaround? I’ll test it with the latest version to see if it is a bug. In this example it doesnt work with datatype: local but it also doesn’t work with a grid that has json data. Am I doing something wrong?

<link href="../../Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.23.js" type="text/javascript"></script>

<script type="text/javascript" src="../../Scripts/i18n/grid.locale-en.js"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>


<script type="text/javascript">
    var mydata = [{ id: "1", name: "foo" }, { id: "2", name: "bar"}];

    jQuery(document).ready(function () {
        jQuery("#lgrid").jqGrid({ data: mydata,
            datatype: "local",
            height: 150,
            width: 600,
            rowNum: 10,
            rowList: [10, 20, 30],
            colNames: ['id', 'name'],
            colModel: [{ name: 'id', index: 'id', width: 60, sorttype: "int" },
                                    { name: 'name', index: 'name', width: 60}],
            pager: "#pgrid",
            viewrecords: true,
            caption: "Contacts"
        });

        jQuery("#lgrid").jqGrid('navGrid', '#pgrid', { del: false, add: false, edit: false });
    });     
    </script> 

<table id="lgrid"></table> 
<div id="pgrid"></div> 

EDIT: Works with jqGrid v4.4.1…so I guess its a bug. Its a pity I can no longer use the nuget package 🙁

Answer 1

I struggled with the same issue, and after I while I found the reason that jQgrid search does not work with jQuery 1.8.0:

In my jquery.jqGrid.js (v 4.3.2) i found this:

if ($("#" + $.jgrid.jqID(IDs.themodal)).html() !== null) {
      showFilter($("#fbox_" + $.jgrid.jqID(+$t.p.id)));
}

In my file it was on line 6863, but you may have to search for it, since my file may be a bit modified compared to the original.

The problem is that $([id]).html() evaluates to null in older jQuery versions, while in jQuery 1.8.0 it instead evaluates to undefined! Since (undefined !== null) is true and (null !== null) is false, the code does different things with different versions of jQuery.

What I did to fix it, and make it work with jQuery 1.8.0 was to change the comparator from !== to !=. This works since both (null != null) and (null != undefined) evaluates to true!

Hope this could be of help!