jqGrid Searchbox "greater than" and "less than" are missing

Question

How can i have greater than or lesser than in the Searchbox?

below is my search code:

{multipleSearch:true}

Searchbox is showing only this

Is there a settings that i need to set for jgGrid to recognize the field date as Date? it appears that it was being read as text.

below is my colModel for date

{name:'date', index:'date', width:90, editable:false, align:"center", editrules:{required:true}}

Answer 1

The behavior which you described exists since introduction of the new filter module in jqGrid. The default behavior is just a little too complex to be described in the "Default" column of the table from the options of searching.

If you examine the source code of jqGrid you will find the following two lines:

numopts : ['eq','ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'],
stropts : ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni'],

So if you have defined sopt property in the searchoptions for some column of jqGrid you will see the corresponding compare operations. You can set default

If you would define any sorttype value other as default 'string' the numerical options will be used as the compare operations. Only for undefined sorttype, undefined searchoptions.sopt and undefined options of searching options prmSearch of navGrid the behavior which you described will be used.

So you can use for example navGrid in the form

$('#grid').jqGrid('navGrid', '#pager',
    {refreshstate: 'current', add: false, edit: false, del: false}, {}, {}, {},
    {sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni']}
);

Another possibility is to define the searchoptions.sopt directly for the 'date' column:

{name: 'date', index: 'date', width: 90, align: "center", editrules: {required: true},
    searchoptions: {sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']}}

You can include all operation which you want to have for the corresponding column depend on the type of the data inside.

What I really recommend you to do is to use column templates. In the projects which I developed for the customers I define in one JavaScript file which I include in all pages different templates for different types of data. For example

var initDate = function (elem) {
        $(elem).datepicker({
            dateFormat: 'dd-M-yy',
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    },
    dateTemplate = {width: 80, align: 'center', sorttype: 'date',
        formatter: 'date', formatoptions: { newformat: 'm/d/Y' }, datefmt: 'm/d/Y',
        editoptions: {date: true, dataInit: initDate },
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }};

If you have defined the dateTemplate variable you can use it like

{name:'date', index:'date', editrules: {required: true}, template: dateTemplate }