title: Programmatic search on custom formatted column in jQGrid
body: <p>I'm trying to do a programmatic search on a custom formatted column in jQGrid, but it's not working. Here's my code. I just compiled this code from different internet sources, so don't get me wrong if you someone finds pieces of code they wrote.</p>
  
  <p>In the snippet below, the custom formatted column is the <code>delCol</code>, but searching with the column doesn't work.</p>
  
  <pre><code>$(document).ready(function () {            
  
          var mydata = [
                  { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Tom" },
                  { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Jerry" },
                  { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Dog" },
                  { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Cat" },
                  { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Mouse" },
                  { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Keller" },
                  { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Jekyll" },
                  { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Hyde" },
                  { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Superman" },
                  { id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Spiderman" },
                  { id: "11", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "He-man" },
                  { id: "12", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Cat" },
                  { id: "13", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Bat" },
                  { id: "14", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Rat" },
                  { id: "15", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Pat" },
                  { id: "16", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Gate" },
                  { id: "17", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Claw" },
                  { id: "18", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Jerry" }
              ],
              getColumnIndexByName = function (grid, columnName) {
                  var cm = grid.jqGrid('getGridParam', 'colModel');
                  for (var i = 0, l = cm.length; i &lt; l; i++) {
                      if (cm[i].name === columnName) {
                          return i; // return the index
                      }
                  }
                  return -1;
              },
              grid = $('#list'), firstButtonColumnIndex, buttonNames = {};
  
          grid.jqGrid({
              data: mydata,
              loadonce: true,
              datatype: 'local',
              colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', 'Custom'],
              colModel: [
                  { name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
                  { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                  { name: 'name', index: 'name', width: 100 },
                  { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                  { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                  { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                  { name: 'note', index: 'note', width: 100, sortable: true },
                  { name: 'delCol', width: 70, sortable: true, index: 'custText',search:true,
                      formatter: function (cellvalue, options, rowObject) {
                          return "&lt;img src='/gr_focus.gif'/&gt;&lt;span&gt;" + rowObject.custText + "&lt;/span&gt;"
                      },
                      unformat: function (cellvalue, options, cell) {
                          return cellvalue;
                      }
                  }
              ],
              pager: '#pager',
              rowNum: 10,
              rowList: [5, 10, 20, 50],             
              viewrecords: true,
              gridview: true,
              height: '100%',
              rownumbers: true,
              caption: 'How to select columns',
              beforeSelectRow: function (rowid, e) {
                  var iCol = $.jgrid.getCellIndex(e.target);
                  if (iCol &gt;= firstButtonColumnIndex) {
                      alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
                  }
  
                  // prevent row selection if one click on the button
                  return (iCol &gt;= firstButtonColumnIndex) ? false : true;
              } 
          });
          firstButtonColumnIndex = getColumnIndexByName(grid, 'add');
          buttonNames[firstButtonColumnIndex] = 'Add';
          buttonNames[firstButtonColumnIndex + 1] = 'Edit';
          buttonNames[firstButtonColumnIndex + 2] = 'Remove';
          buttonNames[firstButtonColumnIndex + 3] = 'Details';
          grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false });
      });
  
   function searchGridFn() {
      grid = $("#list");
      var searchFiler = $("#filter").val(), f;
  
      if (searchFiler.length === 0) {
          grid[0].p.search = false;
          $.extend(grid[0].p.postData, { filters: "" });
      }
      f = { groupOp: "OR", rules: [] };
      f.rules.push({ field: "name", op: "cn", data: searchFiler });
      f.rules.push({ field: "delCol", op: "cn", data: searchFiler });
      grid[0].p.search = true;
      $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
      grid.trigger("reloadGrid", [{ page: 1, current: true}]);
  
  }
  
  &lt;table id="list"&gt;
  &lt;/table&gt;
  &lt;div id="pager"&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;fieldset style="float: left"&gt;
      &lt;input id="filter" /&gt;
      &lt;button id="searchButton" onclick="searchGridFn()"&gt;
          Search&lt;/button&gt;
  &lt;/fieldset&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;button style="clear: left" id="sortGridButton" onclick="sortGridFn()"&gt;
      Sort Grid&lt;/button&gt;
  </code></pre>