JqGrid Searchbox greater than and less than missing

Question

How can I be bigger or smaller than in Searchbox?

below is my search code:

{multipleSearch:true} 

Only this is displayed in the search box.

Are there any settings I need to set for jgGrid in order to know the date of a field as Date? it seems to read like text.

below is my colModel for the date

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

Answer 1

The behavior that you described exists since the introduction of the new filtering module in jqGrid. The default behavior is simply too complicated to be described in the "Default" column of the table from the search options .

If you study the jqGrid source code, 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 defined the sopt property in searchoptions for some jqGrid column, you will see the corresponding comparison operations. You can set the default value

If you define any sorttype other value as default 'string' , numeric parameters will be used as comparison operations. Only for undefined sorttype , undefined searchoptions.sopt and undefined options for search parameters prmSearch navGrid the behavior that you described.

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 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 the entire operation that you want to have for the corresponding column, depending on the type of data inside.

What I really recommend you do is use column templates . In projects that I developed for clients, I define in a single JavaScript file, which I include in all pages different templates for different types of data. for instance

 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 defined a dateTemplate variable, you can use it as

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