jqgrid search filter popup not appearing - asp.net

Question

After much frustration I finally got the search icon to appear in the navigator area but now when I click on it the screen turns "modal" but no search dialog appears!
Here's the head section of my code:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<link href="../Styles/Examiners.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/searchFilter.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.addons.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.postext.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.setcolumns.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.tablednd.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/ui.multiselect.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.searchFilter.js" type="text/javascript"></script>
</asp:Content>
And here's my grid definition
$("#examinersGrid").jqGrid({
url: baseUrl() + selectQuery(),
mtype: "POST",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
datatype: 'json',
colNames: ["Name", "Assignments"],
colModel: [
{ name: 'displayName', index: 'displayName', width: 200, },
{ name: 'assignments', index: 'assignments', width: 120,
formatter: 'integer', sorttype: 'int', align: 'right'
}
],
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
id: "examinerID"
},
autowidth: true,
height: "auto",
rowNum: 10,
loadonce: false,
gridview: true,
pager: "#examinersPager",
search: {
caption: "Search...",
Find: "Find",
Reset: "Reset",
odata: ['equal', 'not equal', 'less', 'less or equal', 'greater', 'greater or equal', 'begins with', 'does not begin with', 'is in', 'is not in', 'ends with', 'does not end with', 'contains', 'does not contain'],
groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any"}],
matchText: " match",
rulesText: " rules"
},
rowList: [10, 20, 30],
sortname: "displayName",
sortorder: "asc",
viewrecords: true,
autoencode: true,
}).navGrid('#examinersPager', { add:false, edit: false, del: false, refresh: false, search: true });
});
Any ideas? I'm tearing my hair out here!

Answer 1

It's quite simple, really... I'm not sure what triggered it.
The solution was to move my jquery.jqGrid.src.js reference below all
the plugin references above it.
Sigh. So it's that old javascript gotcha of making sure the script references come in the right order.