JqGrid Search with multiple text boxes for field

Question

I am wondering if it is possible with JqGrid advanced search to display multiple text boxes for some of the fields I want to search on. For example, if I have a \'Phone Number\'

Answer 1

You have an interesting question, but I suggest you to make input of the phone number more nice and user friendly. There are a nice jQuery "Masked Input" Plugin. It allow you display a mask inside a input field, something like "(_) _-____" and allow only input of numbers. To see life what I mean open the page http://digitalbush.com/projects/masked-input-plugin/#demo, set focus to the Phone field and try to type something. Is it not nice!

To do this inside of JqGrid advanced search dialog you should do following

1. Download jquery.maskedinput-1.2.2.js or/and jquery.maskedinput-1.2.2.min.js from http://digitalbush.com/projects/masked-input-plugin/.
2. Insert one from this JavaScript files in you web page.

3. Add to the definition of your 'Phone Number' column in colModel searchoptions block like following

   { name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center', searchoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); } } }

It's all. Now just open "Advanced Search dialog", choose 'Phone Number' field and set focus in the input field. The function dataInit described in the jqGrid documentation under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita and in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit.

By the way you can receive the same masked input during data editing (both form edit and inline edit). Just define the same editoption like searchoptions:

{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center',
  editoptions: {
    dataInit: function (elem) {
      $(elem).mask("(999) 999-9999");
    }
  },
  searchoptions: {
    dataInit: function (elem) {
      $(elem).mask("(999) 999-9999");
    }
  }
}