Can we have MASK Edit column in the grid

QuestionsCan we have MASK Edit column in the grid
Chandru asked 10 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 10 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 10 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 10 years ago

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

Abu Ghufran answered 10 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 6 years ago

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

Gary Brett answered 9 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 9 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

15 + 10 =

Login with your Social Id:

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 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

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

Let us improve this post!

Tell us how we can improve this post?