free-jqGrid search button does not work on second click

Question

The search button works on the first click, but once it is closed either by clicking the X (close button) or by running a search (setting to close after search) it does not open, there are also no errors in the console so I am unable to determine what is wrong and how to fix it.

var previouslySelectedRow = null;
var rowIsSelected = null;
var previousRowIsSelected = null;
var currentRowId;
var currentCount;
var cancelEditing = function(theGrid) {
    var lrid;
    if (typeof previouslySelectedRow !== "undefined") {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        theGrid.jqGrid('restoreRow', previouslySelectedRow);

        // now we need to restore the icons in the formatter:"actions"
        lrid = $.jgrid.jqID(previouslySelectedRow);
        $("tr#" + lrid + " div.ui-inline-edit").show();
        $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
    }
};

var parsedResult = JSON.parse(DecodeAscii(result));
ShowDebugNotification("DEBUG INFO(" + ajaxCall + "): <br />" + result, false);
$("#productsTable").jqGrid({
        data: parsedResult,
        datatype: "local",
        loadonce: true,
        height: 'auto',
        marginLeft: 'auto',
        colNames: [
            'Product Id', 'Add', 'Product Name', 'Product Code', 'Customer Price'
        ],
        colModel: [
            { name: 'Id', width: 0, hidden:true },
            { name: "actions", template: "actions", width: 50, formatoptions:{
                delbutton: false,
                editbutton: false
            } },
            { name: 'Name', index: 'Name', width: 550, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
            { name: 'ProductCode', index: 'ProductCode', width: 150, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
            { name: 'Price', index: 'Price', width: 100, search: false, formatter: 'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}}
        ],
        rowNum: 15,
        rowList: [5, 10, 15, 20],
        pager: true,
        gridView: true,
        viewrecords: true,
        iconSet: "jQueryUI",
        sortname: 'Name',
        sortorder: 'asc',
        inlineEditing: { keys: false },
        actionsNavOptions: {
            addToCarticon: "ui-icon-cart",
            addToCarttitle: "Add item to the cart",
            custom: [
                { action: "addToCart", position: "first", onClick: function (options) { 
                    var rowData = $('#productsTable').getRowData(options.rowid);
                    var cartButton = $(".ui-icon", "#jAddToCartButton_"+options.rowid);
                    if(cartButton.hasClass("ui-icon-cancel")){
                        cart.shift(rowData);
                        cartButton.removeClass("ui-icon-cancel");
                        cartButton.addClass("ui-icon-cart");
                    }
                    else if(cartButton.hasClass("ui-icon-cart")){
                        cart.push(rowData);
                        cartButton.removeClass("ui-icon-cart");
                        cartButton.addClass("ui-icon-cancel");
                    }
                }
            }]
        },
        loadComplete: function() {
            $("#add-product-dialog-loading-message").hide();
            $(".spinner").hide();
            $("#add-product-dialog-form").dialog("open");

            //for each object in cart
            //if prodcut ID matches product Id in product 
            //grid then set button to a cancel icon
            if(cart.length !== 0){
                var cartIds = [];
                var jsonCart = JSON.stringify(cart);
                var parsedJsonCart = JSON.parse(jsonCart);
                var productsInCart = $.grep(parsedJsonCart, function(el, i){
                    cartIds.push(el.Id);
                });

                var currentRows = $('#productsTable').getRowData();
                var shownProductsThatAreInCart = $.grep(currentRows, function (el, i) {
                    return $.inArray(el.Id, cartIds) !== -1;
                });

                if(shownProductsThatAreInCart.length > 0){
                    var rowIds = $(this).jqGrid('getDataIDs');
                    $.each(rowIds, function(k, v) {
                        rowData = $('#productsTable').getRowData(v);

                        if($.inArray(rowData['Id'], cartIds) !== -1){
                            alert("Matched Product:\nRowData['id'] = " + rowData['Id'] + "\nto\nProduct in cart: " + cartIds.Id);
                            $(".ui-icon", "#jAddToCartButton_"+v).removeClass("ui-icon-cart");
                            $(".ui-icon", "#jAddToCartButton_"+v).addClass("ui-icon-cancel");
                        }
                    });
                }
            }
        },
        gridComplete: function() {
        }
    });
    $("#productsTable").jqGrid("navGrid", {edit:false,add:false,del:false},
    {},// use default settings for edit
    {},// use default settings for add
    {},// delete instead that del:false we need this
    {multipleSearch:false,overlay:false,ignoreCase:true,closeAfterSearch:true,closeOnEscape:true,showQuery:true});

I don't think its a bug as I have seen many demos demonstrating how it is supposed to work, I am guessing I have a mis-configuration, please have a look over my code and help determine the issue.

One thing to keep in mind is I am getting the data to load the grid via an ajax call that returns json, all manipulation is done on the client, there is no posting data back to server at all.

Thank you!

Answer 1

The main problem is the combination of Searching options which you use:

{
    multipleSearch: false, // it's default and can be removed
    overlay: false, // !!! the option make the problem
    ignoreCase: true, // it's not exist at all
    closeAfterSearch: true,
    closeOnEscape: true,
    showQuery: true
}

The usage of the option overlay: false is bad because it makes another option toTop: true not working and the Searching dialog will be placed as the children of jQuery UI Dialog. If you remove the option then one can work with the Searching Dialog more easy and the second problem (a bug in calculation of position of jqGrid Searching Dialog) will not exist. Look at the modified demo:

https://jsfiddle.net/OlegKi/su7mf5k9/3/

UPDATED: It seems one have the problem in creating modal jqGrid dialog inside of modal jQuery UI dialog. The problem could be solved by removing modal: true option from the outer jQuery UI dialog. See https://jsfiddle.net/OlegKi/su7mf5k9/3/

In general one could create hybrid solution which changes the type of jQuery UI dialog from modal to non-modal dynamically, but it could be tricky https://jsfiddle.net/OlegKi/su7mf5k9/5/