StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 "(<strong>_) _</strong>-____" and allow only input of numbers. To see life what I mean open the page <a href="http://digitalbush.com/projects/masked-input-plugin/#demo" rel="nofollow noreferrer">http://digitalbush.com/projects/masked-input-plugin/#demo</a>, set focus to the Phone field and try to type something. Is it not nice!</p> <p>To do this inside of JqGrid advanced search dialog you should do following</p> <ol> <li>Download <em>jquery.maskedinput-1.2.2.js</em> or/and <em>jquery.maskedinput-1.2.2.min.j</em>s from <a href="http://digitalbush.com/projects/masked-input-plugin/" rel="nofollow noreferrer">http://digitalbush.com/projects/masked-input-plugin/</a>.</li> <li>Insert one from this JavaScript files in you web page.</li> <li><p>Add to the definition of your 'Phone Number' column in <code>colModel</code> searchoptions block like following</p> <p>{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center', searchoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); } } }</p></li> </ol> <p>It's all. Now just open "Advanced Search dialog", choose 'Phone Number' field and set focus in the input field. The function <code>dataInit</code> described in the jqGrid documentation under <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita</a> and in <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit</a>.</p> <p>By the way you can receive the same masked input during data editing (both form edit and inline edit). Just define the same <code>editoption</code> like <code>searchoption</code>s:</p> <pre><code>{ 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"); } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload