JQGrid Search form behind the transparent modal overlay window

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

---

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