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?

if Yes , what is workaround for this.


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.

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"); }';

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.


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="//"></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"); }';

For more options, refer:

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..


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:

$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!