javascript - Remove search operator (AND/OR) in multiplesearch jqGrid

Question

I need to hide the operator in the search popup, but I cannot get it to work. I tried this, but both operators still appear:

jQuery("#grilla").navGrid("#paginador",
{del:false,add:false,edit:false},{},{},{},{
groupOps: [{ op: "OR", text: "any" }], multipleSearch:true});

Any ideas? Thanks!

Answer 1

There are no option which can directly do what you need. Moreover if you would hide the ADD/OR operand from the searching dialog at the dialog initialization (for example inside of beforeShowSearch event handler) with $('select.opsel').hide() the select element will be hidden only at the beginning. After the user click on any button the dialog contain will be repaint without calling of any event handler and the select element will be again visible.

So I suggest to solve the problem with overwriting the method reDraw of the filter dialog. The code which do this can look like

jQuery("#grilla").jqGrid("navGrid","#paginador",
    {del: false, add: false, edit: false}, {}, {}, {},
    {
        multipleSearch: true,
        beforeShowSearch: function($form) {
            var searchDialog = $form[0],
                oldrReDraw = searchDialog.reDraw, // save the original reDraw method
                doWhatWeNeed = function () {
                    // hide the AND/OR operation selection
                    $('select.opsel', searchDialog).hide();

                    setTimeout(function () {
                       // set fucus in the last input field
                       $('input[type="text"]:last', searchDialog).focus();
                    }, 50);
                }
            searchDialog.reDraw = function () {
                oldrReDraw.call(searchDialog);    // call the original reDraw method
                doWhatWeNeed();
            }
            doWhatWeNeed();
        }
    }
);

You can see on the demo that the way really works.

UPDATED: After writing of the answer I posted some suggestions to trirand to improve jqGrid. Now jqGrid has many features which simplify the above work. For example there are exist afterRedraw callback which can be directly used. So the code from the answer will look like

grid.jqGrid("navGrid", "#pager",
    {add: false, edit: false, del: false}, {}, {}, {},
    {
        multipleSearch: true,
        afterRedraw: function (p) {
            var $form = $(this);
            $form.find("select.opsel").hide();
            setTimeout(function () {
               // set fucus in the last input field
               $form.find('input[type="text"]:last').focus();
            }, 50);
            $form.find("input.add-rule,input.delete-rule").button();
        }
    }
);

See the modified demo here:

I added one more line in the code of afterRedraw

$form.find("input.add-rule,input.delete-rule").button();

only to improve the look of buttons in the Searching Dialog. I suggested to make such settings default in jqGrid, but this was not accepted by trirand. In any way everyone who includes jQuery UI can add such line in afterRedraw to make the buttons flat.