How to Dynamically Set the Client-side Mask


A client-side mask can be set dynamically at runtime using JavaScript.

Setting a JavaScript Function for a Conditional Mask

JavaScript can be used to dynamically compute the mask for a control. A JavaScript function can be called when the control receives focus. When the JavaScript function is called, data in the current Grid row, (or UX Component) is available for computing the mask.

For example, suppose you store phone numbers for several countries in your database. In the US, UK and Europe, different formats are used for telephone numbers. The JavaScript function can decide what format string to return based on the value of the 'COUNTRY' field for a record.

Changing a Mask Programmatically

If you have defined a client-side data entry mask for a field and want to dynamically change the mask for the field using JavaScript, you may not want to define a separate JavaScript function to compute the mask. You can, instead, change the format function stored in the {grid.object}. Here is how you can edit the mask's format function in the {grid.object} for any client-side event of your choosing. The key to this method is the ._editParseMask() method.

var x = {grid.object}._fieldHelpers_G['FIELD1'];
x.format.mask = '(0)(0)';
x.format._pMask = x._editParseMask(x.format.mask);
This method is for advanced developers only.