Can we have MASK Edit column in the grid

QuestionsCan we have MASK Edit column in the grid
Chandru asked 5 years ago

Can we have MASK column like below link?

http://www.ok-soft-gmbh.com/jqGrid/MaskedInputHours.htm

if Yes , what is workaround for this.

Regards
CHandru

6 Answers
Abu Ghufran answered 5 years ago

Refer this faq: Q) How to mask a field, for example like this: (NN) NNNN-NNNN ? N stands for number.

You can however, pick input jquery id selectors, and linking them using any lib.

for e.g. http://igorescobar.github.io/jQuery-Mask-Plugin/

Most likely, you would need to code it after show form event. for e.g. if ID of element id "date"

$grid["add_options"]["afterShowForm"] = 'function(formid) { jQuery("#total").mask("0,000.00"); }';
$grid["edit_options"]["afterShowForm"] = 'function(formid) { jQuery("#total").mask("0,000.00"); }';
$g->set_options($grid);

You can integrate similar libraries in this way by including the JS file and linking the field with afterShowForm event.

Chandru answered 5 years ago

Hi Abu,

Thank you for the reply.

I have put the above code after putting the mask jquery plugin. but its not working for me.

Regards
Chandru

Abu Ghufran answered 5 years ago

I'm preparing a demo for you, and email you when ready.
Ticket remains open.

Abu Ghufran answered 5 years ago

Step1: Add JS lib

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>

Step2: Set field integration, usually $col['name'] is ID of html element

$opt["add_options"]["afterShowForm"] = 'function(formid) { jQuery("#amount").mask("000.00"); }';
$opt["edit_options"]["afterShowForm"] = 'function(formid) { jQuery("#amount").mask("000.00"); }';
$g->set_options($opt);

For more options, refer: http://igorescobar.github.io/jQuery-Mask-Plugin/

PS: I've emailed you demo file.

DGea replied 1 year ago

Dear Sir Abu,
Could you send me demo file, I will use for mask Phone Number.

Gary Brett answered 4 years ago

Hi Abu, could you also email me the demo, Im also trying to add a date mask for birthdays, using the datepicker makes the user go back many years..

Thanks

Abu Ghufran answered 4 years ago

I would recommend to configure datepicker to block wrong input and select old years.
# opts array can have these options: http://api.jqueryui.com/datepicker/

$col["formatter"] = "date";
$col["formatoptions"] = array("srcformat"=>'Y-m-d',"newformat"=>'Y-m-d', "opts" => array("changeMonth" => true, "changeYear" => true, "yearRange" => "1950:2000"));
$col["editoptions"]["readonly"] = "readonly";
$col["editoptions"]["style"] = "background:white";

Your Answer

0 + 0 =

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!