0

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

Romanof
  • 89
  • 2
  • 3
  • 9

1 Answers1

2

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");
    }
  }
}
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you, it worked, but now I have another problem. If I want to use the jquery mask on anothr field, it doesn't let me. The mask works only for the first field I am defining, but it will not display in the following fields, I can't even type in anything. The focus is still 'trapped' in the first field. – Romanof May 17 '10 at 19:36
  • You are right! It seems that **jquery.searchFilter.js** hat a bug in case of `multipleSearch: true`. Having multiple edit fields makes no problems. Unfortunately because of lack of time in my main projects I can not now invest more time in much investigations. I'll come back to the problem in 2-3 weeks. I can only suggest you to try place this problem as a bug in jqGrid forum (http://www.trirand.com/blog/?page_id=393) or try with another plugin instead of "Masked Input" Plugin. Sorry, but I decide to write you this information, thereby you don't wait from me a quick solution in the next days. – Oleg May 17 '10 at 23:52
  • Hi Oleg, thank you anywya for your answer. I tried already other plugins, but none of them comes closer to 'Masked Input'. Masked Input allows you to display the mask, while the others apply the mask while you are writing. If you have any other suggestion please let me know. – Romanof May 18 '10 at 14:16
  • Try to place this problem as a bug in jqGrid forum (trirand.com/blog/?page_id=393). Tony (the developer of jqGrid) works carefully on bug fixing. Just show, that one can use "Masked Input" Plugin inside of "inline edit" and "form edit" of jqGrid without any problem. So we have a **bug inside of ** *jquery.searchFilter.js* and only in case of multi-search ("Advanced Searching"). Post also a small code and exact description how to reproduce the problem. I think Tony will quickly find the bug and fix it in jqGrid the SearchFilter Plugin. – Oleg May 18 '10 at 14:40
  • I just created a new post in the JqGrid bug section of their forum. Hopefully, they can fix it quickly. Thank you for your help – Romanof May 19 '10 at 14:34
  • Hey Oleg, After reading your conversation with Tony of the JqGrid team in the JqGrid forum, I realize I have to give up using the masked input/multi-search combination. Is there any other way to add a mask to a field when using Advanced Search? i haven't found any plugin that come even close to the features of Masked Input. – Romanof Jun 02 '10 at 15:40
  • Hello! You should describe more exactly for which situation (which data input) you need the "Masked Input". This plug-in looks like very nice, but in the real usage you will find a lot of restrictions. For example, If you define a telephone number mask as (999) 999-9999 and try to enter a short number like (999) 123-456 it will be not allowed (try in the demo). So some other Plug-Ins which look like not so nice but has more freedom in defining of rules for input can be more useful in the practice. Just search more for validation of inputs as for a real musked input - it's my recommendation. – Oleg Jun 02 '10 at 16:05
  • I need a masked input, just like the plugin does.. When the masked field get the focus, I'd like to see the mask displayed and then when I click search, I'd like to be able to use that mask to split the string. As far as I know, only Masked Input has this two features. – Romanof Jun 02 '10 at 17:45
  • look at this http://stackoverflow.com/questions/3054811/add-multiple-input-elements-in-a-custom-edit-type-field/3055626#3055626. It can solve your problem. – Oleg Jun 16 '10 at 18:14