This is an old revision of the document!


Custom Searching

This method can be called to construct an custom search form for the grid.
The method uses the url option in grid to perform a search to the server.
When the search is activated, an array of type name:value is posted to the server. Note that this array is added to the postData parameter. We post only fields that have an entered value. When we clear the the search form, the values are deleted from the postData array. When posting to the server, we try to pass, not the name, but the index set in colModel. When the index is not found we use the name. Additionally, we add a _search=true to the posted data.

Installation

In order to use this method a Custom module should be checked when you download the grid. For more information refer to Download

Calling conventions and options

The search form is defined, first, in the html, positioned above or below the grid definition, as you prefer.

<div id="mysearch"></div>

and then

jQuery("#mysearch").filterGrid('#grid_id',options);

or using the new API

jQuery("#mysearch").jqGrid('filterGrid','#grid_id',options);

Where:

  • grid_id is the id of the grid to which the search will be applied.
  • options is an array of parameters (see below).

The options that can be used are:

OptionDescriptionDefault
gridModelwhen set to true, we use the parameters from colModel to construct the search, using the following options from colModel: name, index, edittype, editoptions, search.
Additional parameters can be set in colModel to meet the needs only of this method. These specific parameters are:
defval: default value for the search field this will be set as initial search.
surl: valid only if edittype:'select'; url from where we can get already-constructed select element - e.g., we expect the following html content (square brackets have been substituted for angle brackets so we can see the code):
<select>
<option value='val1'> Value1 </option>
<option value='val2'> Value2 </option>

<option value='valn'> ValueN </option>
</select>
Only fields with search: true are attached to the form. Hidden elements are not included.
When false we should construct a filterModel (see below) to perform a search.
false
gridNamesthis option works only if gridModel is true. When set to true we use the names from colNames as labels for the search fields.false
gridToolbarDeprecated. Use filterToolbar method insteadfalse
filterModelThe filter model should be used when gridModel is set to false
filterModel [

{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}},

label: the label of the field (text description)
name: the name of the column - should equal of the name in colModel. Note that we search on the index of that coulmn.
stype: type of input element - can be only 'text' or 'select'
defval: default value for the search input element.
surl: used only when stype is 'select'; this is a url from where we can get an already-constructed select element - i.e. we expect the following html content:
<select>
<option value='val1'> Value1 </option>
<option value='val2'> Value2 </option>

<option value='valn'> ValueN </option>
</select>
sopt: valid options that can be applied to the element, the same as editoptions from colModel.
[]
formtypedefines how the form should be constructed. Can be 'horizontal' or 'vertical'horizontal
autosearchWhen set to true the behavior is as follows:
When the user input some value in the input element they can press enter and the search is activated.
When a select box is used search is activated when the values of select is changed.
When set to false we can use the button to perform the search.
true
formclassthe class that can be applied to the form“filterform”
tableclassthe class that can be applied to the table (the table is a child of form element)“filtertable”
buttonclassclass that can be applied to the buttons“filterbutton”
searchButtonthe label of the button that performs the search. (Note - this label does not come from the language files, since the intention is to separate this method so that it can be used anywhere - i.e. without using jqGrid)“Search”
clearButtonthe label of the button that clears the already-entered values“Clear”
enableSearchenable/disable the search buttonfalse
enableClearenable/disable the clear buttonfalse
beforeSearchevent which fires before a searchnull
afterSearchevent which fires after the search is performednull
beforeClearevent which fires before clearing entered values (i.e when clear button is clicked)null
afterClearevent which fires after clearing entered valuesnull
urla separate url for searching values''
marksearchedwhen set to true, after a search every column to which search is applied is marked as searchable - e.g., in the upper left corner of the column header a marker is set to indicate that this column is part of the applied search. When we clear the values the markers disappear.
Not applicable in 3.5 release
true

Additional Methods

When using filterGrid we can use two additional privileged methods:
triggerSearch - triggers a search to the grid, for example,

var sg = jQuery("#mysearch").filterGrid(...)[0]; 
sg.triggerSearch();

clearSearch - clears the search form values and triggers the search with empty or default values.

sg.clearSearch();
Do not use these methods with the new API. They will not work!

Discussion

Michael Savchenko, 2012/02/24 17:21

Hello - Has filterGrid been removed from jqGrid? I have the latest, v. 4.3.1, and filterGrid is nowhere to be seen, with or without the “Custom” module. Thanks -Misha.

guibirong, 2012/05/24 04:09

Has filterGrid been removed from jqGrid? I have the latest, v. 4.3.2, and filterGrid is nowhere to be seen, with or without the “Custom” module. Thanks -guibirong.

Mike Duey, 2012/06/01 16:20

Has filterGrid been removed from jqGrid? I have the latest, v. 4.3.3, and filterGrid is nowhere to be seen, with or without the “Custom” module. Thanks -mduey.

Sameer Semna, 2012/10/25 14:17

You have to add grid.addons.js script file in head tag

<script src=“plugins/grid.addons.js” type=“text/javascript”></script>

You could leave a comment if you were logged in.

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