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’ field, I want to be able to visualize 2 boxes, one for area code and the other for the rest of the phone number.
Then after pressing ‘Find’ I want to able to get the two values and merge them or do something else.

Any help would be appreciated,

Thanks,

fromano2802

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(“[phone]”);
   }
   }
   }

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%5B%5D=datainita and in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s%5B%5D=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("[phone]");
    }
  },
  searchoptions: {
    dataInit: function (elem) {
      $(elem).mask("[phone]");
    }
  }
}