This is an old revision of the document!


Configuration

The columns in the grid can be used as the basis for a search form to appear above, below, or in place of, the grid. Searching is a way of querying data from the server using specified criteria.

Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching is done server side.

There are four approaches:

  • a toolbar searching
  • a custom searching
  • a single field searching
  • a more complex approach involving many fields and conditions - advanced searching

These approaches use common options from jqGrid and so can be called only on an already-constructed grid.

Every search method require that some additional module should be included into the package. Also refer to Download or in every specific module on what should be included

All search modules (except custom searching and toolbar searching) uses the following definition from language file:

$.jgrid = {
...
   search : {
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
   },
...

colModel Options

As of 3.5 release jqGrid uses a common search options that can be used on every search method. Below is a list of these options that should be set in colModel. Note that some options are not applicable for particular method.

OptionTypeDescriptionDefault
searchbooleanDetermines if the field can be searched.true
stypestringDetermines the search type of the field. Can be text - also a input element with type text is created and select - a select element is createdtext
searchoptionsobject Object which contain definition, events and other properties for the searched field. See below
searchrulesobject Object which contain additional conditions for validating user input

The searchoptions object have the following properties:

The searchoptions are not applicable to custom search method. This method uses separate options.
PropertyTypeDescription
dataUrlstringThis option is valid only for the elements of type select - i.e stype:'select'. The option represent the url from where we load the select element. When this option is set the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options. By example the request should contain <select><option value=“1”>One</option> <option value=“2”>Two</option></select>. This is called only once.
buildSelectfunctionThis option have sense only if the dataUrl parameter is set. In case where the server response can not build the select element you can use your on function to build the select. The function should return a string containing the select and options value(s) as described in dataUrl option. Parameter passed to this function is the server response
dataInitfunctionIf set this function is called only once when the element is created. To this function we pass the element object.
dataInit: function(elem) {
do something
}
Also use this function to attach datepicker, time picker and etc. Example:
dataInit : function (elem) {
$(elem).datepicker();
}
dataEventsarrayList of events to apply to the data element; uses $(“#id”).bind(type, [data], fn) to bind events to data element. Should be described like this:
dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},
{ type: 'keypress', fn: function(e) { console.log('keypress'); } }
]
attrobjectattr is object where we can set valid attributes to the created element. By example:
attr : { title: “Some title” }
Will set a title of the searched element
searchhiddenboolean By default hidden elements in the grid are not searchable . In order to enable searching when the field is hidden set this option to true
soptarrayThis option is used only in advanced , single and toolbar field searching and determines the operation that is applied to the element. If not set all the available options will be used. When used in toolbar searching the first element is used. All available option are:
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
The corresponding texts are in language file and mean the following:
['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
Note that the elements in sopt array can be mixed in any order.
defaultValuestringIf not empty set a default value in the search input element.
valuemixed The option is used only for stype select and defines the select options in the search dialogs. When set for stype select and dataUrl option is not set, the value can be a string or object.
If the option is a string it must contain a set of value:label pairs with the value separated from the label with a colon (:) and ended with(;). The string should not end with a (;)- editoptions:{value:“1:One;2:Two”}.If set as object it should be defined as pair value:name - editoptions:{value:{1:'One',2:'Two'}}
Note: when the dataUrl in searchoptions object is not used for the search type select, the definitions for the select are taken first from searchoptions value property and if this is not defined a editoptions value property is used- i.e editoptions:{value:“1:one;2:two”,…}. See below how to use these options in different search methods.

colModel conventions:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },
      ...
   ]
...
});
datePick = function(elem)
{
   jQuery(elem).datepicker();
}
</script>

searchrules

This option add additional properties to the searchable element and should be used in colModel. Mostly it is used to validate the user input before submitting the value(s) to the server. Syntax:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., searchrules:{required:true....}, search:true },
      ...
   ]
...
});
</script>

Below is the list of available options:

OptionTypeDescription
requiredboolean (true or false) if set to true, the value will be checked and if empty, an error message will be displayed.
numberboolean (true or false) if set to true, the value will be checked and if this is not a number, an error message will be displayed.
integerboolean(true or false) if set to true, the value will be checked and if this is not a integer, an error message will be displayed.
minValuenumber(integer)if set, the value will be checked and if the value is less than this, an error message will be displayed.
maxValuenumber(integer)if set, the value will be checked and if the value is more than this, an error message will be displayed.
emailbooleanif set to true, the value will be checked and if this is not valid e-mail, an error message will be displayed
urlbooleanif set to true, the value will be checked and if this is not valid url, an error message will be displayed
dateboolean if set to true a value from datefmt option is get (if not set ISO date is used) and the value will be checked and if this is not valid date, an error message will be displayed
timebooleanif set to true, the value will be checked and if this is not valid time, an error message will be displayed. Currently we support only hh:mm format and optional am/pm at the end
customboolean if set to true allow definition of the custom checking rules via a custom function. See below
custom_funcfunction this function should be used when a custom option is set to true. Parameters passed to this function are the value, which should be checked and the name - the property from colModel. The function should return array with the following parameters: first parameter - true or false. The value of true mean that the checking is successful false otherwise; the second parameter have sense only if the first value is false and represent the error message which will be displayed to the user. Typically this can look like this [false,“Please enter valid value”]
“The searchrules will be used only in the searching dialog, but not in the searching filter…..” according to the following link by Oleg [http://stackoverflow.com/a/9011733]

Custom Checking example

<script>
function mypricecheck(value, colname) {
if (value < 0 || value >20) 
   return [false,"Please enter value between 0 and 20"];
else 
   return [true,""];
}
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., searchrules:{custom:true, custom_func:mypricecheck....}, search:true },
      ...
   ]
...
});
</script>

What you need to know

  • All search modules uses the url parameter in grid to perform the search. In some methods there is additional separate option for the url which can be used too.
  • When the search is performed the postData array is filled with the needed data for the search.
  • The parameter search in grid options is set to true in order to indicate the searching. Server side the name of this is _search (note the difference) which can be obtained using the GET or POST data array.
  • For the search we have additional array searchdata array in the grid options. This array extends the postData array.
  • When the grid is triggered when using the refresh button in Navigator the search option is set to false.
  • Every search method creates its own method to clear the searched data from postData array. Use these methods to do this.

Discussion

MSW, 2011/02/24 09:02

jQuery('#list').jqGrid('filterToolbar',{stringResult:true, searchOnEnter:false});

data from datepicker is inserted into the search box, but the search does not occur until you manually add or remove any character in search field, how to do that would be after the response datepicker an automatic search?

MSW, 2011/02/24 14:57

solution onChange: function(){ jQuery('#list')[0].triggerToolbar(); }

Alexey Vertinsky, 2011/06/10 07:24

HOW TO ^ for solution :)

searchoptions:{dataInit:function(el){$(el).datepicker({ dateFormat:“yy-mm-dd” }).change(function(){$(”#grid_id”)[0].triggerToolbar();});} }

Mohammad R. Farahy, 2011/03/14 11:51, 2011/03/14 12:01

in searchFilter v1.2.9 we haven't searchoptions.value but we have searchoptions.dataValues ! please fix up your document it take me 1 hour !!! :)

in the other hand in search dialog you use dataValues to providing list data and in toolbar search you use value to providing list data !!!!!

Allen Hsu, 2012/03/08 18:51

“The searchrules will be used only in the searching dialog, but not in the searching filter….” according to the following link by Oleg [http://stackoverflow.com/a/9011733]

Jeffen, 2012/03/13 10:49

i find a bug that the title set is not work: searchoptions :{dataInit:datePick,attr:{title:'Select Date'}}

i debugging the jquery.jqGrid.src.js at the following function and it's worked:

function setAttributes(elm, atr, exl ) {

$.each(atr, function(key, value){

			if($.inArray(key, exclude) === -1) {
				$(elm).attr(key,value);
			}
			
			/**
			 * attr modify by jeffen@bjsunwin at 2012-03-13
			 */
			if(key=='attr'){
				$.each(value, function(key, value){
					$(elm).attr(key,value);
				});
			}
		});

but what i want to know is that how to get the new file jquery.jqGrid.min.js?

laineyc, 2012/03/16 01:50, 2012/03/16 02:14

why the parameter “filters” can not be defined as {“groupOp”:“AND”,”rules”:[{“field”:“a.id”,”op”:“eq”,”data”:“2121”,”type”:“integer”}]};

type : date , string , integer , number or customType ….

Alvaro, 2012/07/30 11:49, 2012/07/30 11:49

En los ejemplos, para poder mostrar los valores del campo select te escriben esto:

{name:'tax',index:'tax', width:80, align:“right”, stype:'select', editoptions:{value:”:All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00”}},

y eso no es correcto, porque de esa manera no se muestran. Lo correcto es poner esto: {name:'tax',index:'tax', width:80, align:“right”, stype:'select', searchoptions:{value:”:All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00”}},

Matt, 2012/12/15 18:25

When using the toolbar search, how can I make the search CASE INSENSITIVE?

Thank you!

You could leave a comment if you were logged in.

QR Code
QR Code wiki:search_config (generated for current page)