Table of Contents
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:
| Option | Description | Default |
|---|---|---|
| gridModel | when 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 |
| gridNames | this option works only if gridModel is true. When set to true we use the names from colNames as labels for the search fields. | false |
| gridToolbar | Deprecated. Use filterToolbar method instead | false |
| filterModel | The 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. | [] |
| formtype | defines how the form should be constructed. Can be 'horizontal' or 'vertical' | horizontal |
| autosearch | When 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 |
| formclass | the class that can be applied to the form | “filterform” |
| tableclass | the class that can be applied to the table (the table is a child of form element) | “filtertable” |
| buttonclass | class that can be applied to the buttons | “filterbutton” |
| searchButton | the 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” |
| clearButton | the label of the button that clears the already-entered values | “Clear” |
| enableSearch | enable/disable the search button | false |
| enableClear | enable/disable the clear button | false |
| beforeSearch | event which fires before a search | null |
| afterSearch | event which fires after the search is performed | null |
| beforeClear | event which fires before clearing entered values (i.e when clear button is clicked) | null |
| afterClear | event which fires after clearing entered values | null |
| url | a separate url for searching values | '' |
| marksearched | when 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();
Discussion
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.
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.
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.
You have to add grid.addons.js script file in head tag
<script src=“plugins/grid.addons.js” type=“text/javascript”></script>