Implementation of a search filter(range) in jqGrid

Question

I am using the search dialog box in jqgrid. The columns for which I wanted the filters, I just had need to set the search attribute as true.

Like this ::

{name:'Date',search = true}

{name:'Date 1',search : true}

$("#grid1").jqGrid('navGrid','#pager1', 
{edit:false, 
add:false, 
del:false, 
search:true, 
refresh: true},{}, {}, {}, {multipleSearch: true,closeAfterSearch: true,groupOps: [ { op: "AND", text: "AND" }]} ); 

With that it appears in the search dialog box.

Can we have just column names instead of select drop down of columns in the search dialog box of JQGRID ?

The latest Image:

This is my code::

I tried with the two code snippets that you have provided with the following changes:

$.extend($.jgrid.search, {
    multipleSearch: true,
    closeAfterSearch: true,
    groupOps: [ { op: "AND", text: "AND" }],
    afterRedraw: function (p) {
        var $form = $(this);
        $form.find("select.opsel,input.add-rule,input.delete-rule,td.columns>select").hide();
        $form.find("td.operators>select").prop("disabled", true);
        $form.find("td.columns").append("<span>Due Date:<span>");
        setTimeout(function () {
           // set focus in the first input field
           $form.find('input[type="text"]:first').focus();
        }, 100);
    }
});

$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, searchfunc: function (pSearch) {
    var $this = $(this);
    $this.jqGrid("setGridParam", {postData: {
        filters: {
            groupOp: "AND",
            rules: [
                { field: "dueDt", op: "le", "data": "" },
                { field: "dueDt", op: "ge", "data": "" }
            ]
        }
    }});
    $this.jqGrid("searchGrid", pSearch);
}});

The post data is

postData: {}

Answer 1

If I correctly understand your question you want

1. hide some controls of searching dialog
2. set the filter rule before the searching dialog will be opened. To be exact you need to set AND operation with two rules: "greater or equal" and "less or equal" to some columns.

I could imagine multiple implementations of the scenario. For example you can use navGrid with search: false option and use navButtonAdd to add the custom button which looks exactly like "Search" button. Alternatively you can use searchfunc parameter of navGrid to reset postData.filters to the filter which you need before calling of searchGrid. The both implementation will be very close.

The demo demonstrates the second approach. I set parameters of Searching dialog by expending of $.jgrid.search to reduce usage of many empty ({}) parameters of navgrid:

$.extend($.jgrid.search, {
    multipleSearch: true,
    closeAfterSearch: true,
    groupOps: [ { op: "AND", text: "AND" }],
    afterRedraw: function (p) {
        var $form = $(this);
        $form.find("select.opsel,input.add-rule,input.delete-rule,td.columns>select").hide();
        $form.find("td.operators>select").prop("disabled", true);
        $form.find("td.columns").append("<span>Due Date:<span>");
        setTimeout(function () {
           // set focus in the first input field
           $form.find('input[type="text"]:first').focus();
        }, 100);
    }
});

Inside of afterRedraw I disable additionally the operations select:

The code which calls navGrid is the following:

$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, searchfunc: function (pSearch) {
    var $this = $(this);
    $this.jqGrid("setGridParam", {postData: {
        filters: {
            groupOp: "AND",
            rules: [
                { field: "invdate2", op: "le", "data": "" },
                { field: "invdate1", op: "ge", "data": "" }
            ]
        }
    }});
    $this.jqGrid("searchGrid", pSearch);
}});