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.

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"
   },
...

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.

The searchoptions object have the following properties:

<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>

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:

<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>

• 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.