jquery - How do I set default values for jqGrid single-search fields

Question

I need to set the default column selection on a jqGrid single-search dialog.

The options available are described on the jqGrid wiki

To set the default search "type" option, I re-ordered the "sopt" array with the value I need ("contains", "cn") first in the array and set this on the navGrid search options. Despite browsing the source code I have not been able to work out which property might affect the initial field selection. It always defaults to the first column in my colModel.

My code is:

$('#tableid').jqGrid({
    colNames: ['ID', 'Membership#', 'Join Date', 'Email', 'Name', 'Address', 'Postcode'],
    colModel: [
        {name:'ID',       index:'ID',       hidden:true },
        {name:'MEMID',    index:'MEMD',     width:90 },
        {name:'JOINDATE', index:'JOINDATE', width:70 },
        {name:'EMAIL',    index:'EMAIL',    width:150, align:"right" },
        {name:'NAME',     index:'NAME',     width:120, align:"right" },
        {name:'ADDRESS',  index:'ADDRESS',  width:250, align:"right" },
        {name:'POSTCODE', index:'POSTCODE', width:80,  align:"right" }
      ],
      // etc. ...
});

$("#tableid").jqGrid('navGrid', '#pager',
    { /* parameters */
      edit:false, add:false, del:false, searchtext:'Find ', refreshtext:'Refresh ' 
    },
    { /* edit options */ },
    { /* add options */ },
    { /* delete options */ },
    { /* search options */
      multipleSearch:false,
      multipleGroup:false,
      showQuery:false,
      top: 190,
      left: 200,
      caption: "Search for members...",
      closeAfterSearch: false,
      sopt: ['cn','nc','eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en'],
    },
    { /* view options */ }
);

When the user clicks on "Find" I would like the initial default search dialog to be presented with "Name", "contains" selected.

Answer 1

It's a good question! jqGrid contains the option columns which can be used to implement your requirements, but the usage of the option is not simple. So I made the demo for you.

The option columns of searching dialog is not documented probably because it's not really user friendly. The option columns can contains array of items of colModel. Exactly the items in the same order will be used in construction of the drop-down select with column names. Per default jqGrid fill columns with all items of colModel which don't have search: false property. For hidden columns (having hidden: true) it will be tested additionally searchoptions.searchhidden property (see the part of the source code). So the option columns will be filled internally per default. On the other side one can overwrite the option columns to have custom order of searching fields.

The code which you included in the text of your question produced the following searching dialog

After filling option columns you can change it to for example the following

The corresponding demo is here. The most important parts of the code are below

var $grid = $('#tableid'),
    getColumnByName = function (colName) {
        var colModel = $.extend([], this.jqGrid("getGridParam", "colModel")),
            colNames = $.extend([], this.jqGrid("getGridParam", "colNames")),
            l = colModel.length, i, cm;
        for (i = 0; i < l; i++) {
            cm = colModel[i];
            if (cm.name === colName) {
                cm.label = cm.label || colNames[i];
                return cm;
            }
        }
    };
$grid.jqGrid({
    colNames: ['ID', 'Membership#', 'Join Date', 'Email', 'Name', 'Address', 'Postcode'],
    colModel: [
      {name: 'ID',       hidden: true },
      {name: 'MEMID',    width: 90 },
      {name: 'JOINDATE', width: 70 },
      {name: 'EMAIL',    width: 150, align: "right" },
      {name: 'NAME',     width: 120, align: "right" },
      {name: 'ADDRESS',  width: 250, align: "right" },
      {name: 'POSTCODE', width: 80,  align: "right" }
    ],
    ...
});
$grid.jqGrid('navGrid', '#pager',
    { /* parameters */
      edit:false, add:false, del:false, searchtext:'Find&nbsp;', refreshtext:'Refresh&nbsp;' 
    },
    { /* edit options */ },
    { /* add options */ },
    { /* delete options */ },
    { /* search options */
        ...
        columns: [
            getColumnByName.call($grid, 'NAME'),
            getColumnByName.call($grid, 'EMAIL'),
            getColumnByName.call($grid, 'JOINDATE'),
            getColumnByName.call($grid, 'MEMID'),
            getColumnByName.call($grid, 'ADDRESS'),
            getColumnByName.call($grid, 'POSTCODE')
        ]
    },
    { /* view options */ }
);

UPDATED: There are small bug in Single Value Searching (multipleSearch: true not set) and setting of columns option. In the answer I describe how the bug can be fixed. Alternatively you can use multipleSearch: true option and specify filters with default searching rule in postData (see the same answer).