JQGrid Search form behind the transparent modal overlay window - asp.net-mvc

Question

This has got to be a stupid mistake but for the life of me I can't figure it out. I am trying to use the search feature from the navigator of jqgrid. When I click the search icon the form displays above the grid but then the entire area (grid and search form above it) are covered by a transparent search modal window. I am stuck at this point without the search feature or the ability to get out of the modal overlay.
I am using a grid with 2 detail grids the same behavior is in all three grids. Here is my definition. Any suggestions much appreciated.
jQuery(document).ready(function() {
jQuery("#equipgrid").jqGrid({
url: '/EquipTrack/GridData/',
editurl: '/EquipTrack/Edit/',
datatype: 'json',
mtype: 'GET',
height: 255,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Type', 'Make', 'Model', 'Year', 'Location', 'Insp Due', 'Serv Due', 'Miles/Hrs', 'Milage Dt', 'Reg By', 'Mngd By', 'Mngd By Dt', 'Tag Exp', '', '', '', '', 'Vin Num', 'Title Num', 'GVW', 'Unlaiden Wt', 'Tag Num', 'Tag State', 'Fuel', 'Cost', 'Inspect Rmndr(wks)', 'Tag Rmndr(wks)', 'Stolen', 'Sold', 'Lojack', 'In Repair', 'Totaled', 'Hut Sticker', 'Apportioned', 'IFTA Sticker', 'Comment'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true, search: true },
{ name: 'type_desc', index: 'type_desc', width: 130, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetTypes'} },
{ name: 'make_descr', index: 'make_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetMakes'} },
{ name: 'model_descr', index: 'model_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetModels'} },
{ name: 'equip_year', index: 'equip_year', width: 60, editable: true },
{ name: 'work_loc', index: 'work_loc', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetLocations'} },
{ name: 'insp_due_dt', index: 'insp_due_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'service_due_num', index: 'service_due_num', width: 80, editable: true },
{ name: 'miles_hours', index: 'miles_hours', width: 80, editable: true },
{ name: 'miles_dt', index: 'miles_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'registered_by', index: 'registered_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
{ name: 'managed_by', index: 'managed_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
{ name: 'managed_by_dt', hidden: true, editable: true, editrules: { edithidden: true },
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'tag_expire_dt', index: 'tag_expire_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'inspection_warn', hidden: true },
{ name: 'service_warn', hidden: true },
{ name: 'tag_warn', hidden: true },
{ name: 'equip_color', hidden: true },
{ name: 'vin_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'title_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'gross_v_wt', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'unlaiden_wt', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'tag_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'tag_state', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'fuel_descr', index: 'fuel_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetFuels'} },
{ name: 'cost', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'insp_rmdr_wks', hidden: true, editable: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
{ name: 'tag_expire_rmdr_wks', editable: true, hidden: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
{ name: 'stolen', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'sold', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'lojack', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'in_repair', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'totaled', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'hut_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'apportioned', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'ifta_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'comment', hidden: true, editable: true, editoptions: { value: "True:False" }, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'equip_id',
sortorder: "asc",
afterInsertRow: function(rowid, rowdata, rowelem) {
if (rowelem[14] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'insp_due_dt', '', { color: 'red' })
}
if (rowelem[15] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'service_due_num', '', { color: 'red' })
}
if (rowelem[16] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'tag_expire_dt', '', { color: 'red' })
}
if (rowelem[17] == 'SET_GREEN') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'green' })
}
if (rowelem[17] == 'SET_PURPLE') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'purple' })
}
if (rowelem[17] == 'SET_BLUE') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'blue' })
}
// if (rowelem[12] == '01/01/3000') {
// jQuery("#equipgrid").setCell(rowid, 'tag_expire_dt','', '')
// }
},
viewrecords: true,
pager: jQuery('#equipgridp'),
caption: 'Inventory for <%= ViewData["division"] %>',
ondblClickRow: function(rowid) { $("#equipgrid").editGridRow(rowid, editprm); },
onSelectRow: function(ids) {
if (ids != null) {
var data = $("#equipgrid").getRowData(ids);
jQuery("#equip_svc").setGridParam({ url: "/EquipTrack/GetServiceGridData/" + data.equip_id, page: 1 })
.trigger('reloadGrid');
jQuery("#equip_asgn").setGridParam({ url: "/EquipTrack/GetAssignGridData/" + data.equip_id, page: 1 })
.trigger('reloadGrid');
}
}
}).navGrid('#equipgridp', {edit:true, add:true, del:true, search:true}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipgridp_center').remove();
$('#equipgridp_right').remove();
jQuery("#equip_svc").jqGrid({
editurl: '/EquipTrack/EditService/',
datatype: 'json',
mtype: 'GET',
height: 100,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Service Date', 'Type', 'Mechanic', 'Miles', 'Hours', 'Labor Cost', 'Parts Cost', 'Total Cost', 'Update Next Svc Due', 'Service Requested', 'Service Performed', 'Parts Required', 'Comments'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true },
{ name: 'service_dt', index: 'service_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'serv_descr', index: 'serv_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetServiceTypes'} },
{ name: 'mechanic', index: 'mechanic', width: 80, editable: true },
{ name: 'mileage', index: 'mileage', width: 60, editable: true },
{ name: 'hours', index: 'hours', width: 60, editable: true },
{ name: 'labor_cost', index: 'labor_cost', width: 60, editable: true },
{ name: 'parts_cost', index: 'parts_cost', width: 60, editable: true },
{ name: 'total_cost', index: 'total_cost', width: 60, editable: true },
{ name: 'calc_next_svc', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'serv_reqstd', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'serv_perf_descr', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'parts_reqrd', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'comments', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'service_dt',
sortorder: "desc",
viewrecords: true,
pager: jQuery('#equipsvcp'),
caption: 'Services'
}).navGrid('#equipsvcp', {}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('service_dt').disabled = true;
// document.getElementById('serv_descr').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
var rowid = jQuery("#equipgrid").getGridParam("selrow");
var cellData = jQuery("#equipgrid").getCell(rowid, "equip_id");
document.getElementById('equip_id').value = cellData;
document.getElementById('equip_id').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
// jQuery("#equip_svc").setCell(1, 'calc_next_svc', 'True', {});
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipsvcp_center').remove();
$('#equipsvcp_right').remove();
jQuery("#equip_asgn").jqGrid({
editurl: '/EquipTrack/EditAssign/',
datatype: 'json',
mtype: 'GET',
height: 100,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Assign To', 'Date Assigned', 'Return Date', 'Assign Condition', 'Return Condition', 'Assign Miles', 'Return Miles', 'Assign Hours', 'Return Hours', 'Comments'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true },
{ name: 'assigned_to', index: 'assigned_to', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetAssignTo'} },
{ name: 'assigned_dt', index: 'assigned_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'return_dt', index: 'return_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'asgn_condition_id', index: 'asgn_condition_id', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetConditions'} },
{ name: 'ret_condition_id', index: 'ret_condition_id', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetConditions'} },
{ name: 'asgn_miles', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'ret_miles', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'asgn_hours', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'ret_hours', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'comments', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'assigned_dt',
sortorder: "desc",
viewrecords: true,
pager: jQuery('#equipasgnp'),
caption: 'Assignments'
}).navGrid('#equipasgnp', {}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('assigned_dt').disabled = true;
// document.getElementById('serv_descr').disabled = true;
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
var rowid = jQuery("#equipgrid").getGridParam("selrow");
var cellData = jQuery("#equipgrid").getCell(rowid, "equip_id");
document.getElementById('equip_id').value = cellData;
document.getElementById('equip_id').disabled = true;
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipasgnp_center').remove();
$('#equipasgnp_right').remove();
});
$(function() {
$("#tabs").tabs();
});
Equipment
Tools
Small Tools
Tools
Small Tools

Answer 1

Found it. I was missing the jquery.searchFilter.css file from my project.