Ej1 api migration in React Maskedtextbox component

10 Mar 20255 minutes to read

This article describes the API migration process of MaskEdit component from Essential^® JS 1 to Essential^® JS 2.

Common

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
| Adding custom class | Property: cssClass

<EJ.MaskEdit id="mask" maskFormat="9999" cssClass="custom"></EJ.MaskEdit> | Property: cssClass

<MaskedTextBoxComponent id="mask" mask='9999' cssClass = "custom"></MaskedTextBoxComponent> |
| Destroy editor | Not Applicable | Method: destroy

<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.destroy(); |
| Disable the maskedit control | Method: disable

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable(); | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.enabled= false; |
| Enable the maskedit control | Method: enable

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable(); | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.enabled= true; |
| Control state | Property: enabled

<EJ.MaskEdit id="mask" maskFormat="0-0000" enabled={false}></EJ.MaskEdit> | Property: enabled

<MaskedTextBoxComponent id="mask" mask='00-000' enabled=false></MaskedTextBoxComponent> |
| Persistence | Property: enablePersistence

<EJ.MaskEdit id="mask" maskFormat="0000" enablePersistence={{true}}></EJ.MaskEdit> | Property: enablePersistence

<MaskedTextBoxComponent id="mask" mask='0000' enablePersistence=true></MaskedTextBoxComponent> |
| Triggers when editor is focused in | Event: focusIn

<EJ.MaskEdit id="mask" maskFormat="00-00" focusIn={this.focusIn}></EJ.MaskEdit>

script
focusIn: function() {} | Event: focus

<MaskedTextBoxComponent id="mask" mask='00-00' focus={this.onFocus.bind(this)}></MaskedTextBoxComponent>

public onFocus() {} |
| Triggers when editor is focused out | Event: focusOut

<EJ.MaskEdit id="mask" maskFormat="0000" focusOut={this.focusOut}></EJ.MaskEdit>

script
focusOut: function() {} | Event: blur

<MaskedTextBoxComponent id="mask" mask='00-00' blur={this.onBlur.bind(this)}></MaskedTextBoxComponent>

script
public onBlur() {} |
| Sets height | Property: height

<EJ.MaskEdit id="mask" maskFormat="0000" height="30px"></EJ.MaskEdit> | Can be achieved using,

<MaskedTextBoxComponent id="mask" mask='0000' cssClass = "custom"></MaskedTextBoxComponent>
Css
.e-maskedtextbox.custom{
height: 30px
} |
| HTML Attributes | Property: htmlAttributes

<EJ.MaskEdit id="mask" maskFormat="0000" htmlAttributes= {htmlAttr}></EJ.MaskEdit>

script
var htmlAttr = {name: "maskedtextbox"}; | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent> |
| Specifies Input mode | Property: inputMode

<EJ.MaskEdit id="mask" maskFormat="0000" inputMode="password"></EJ.MaskEdit> | Can be achieved using
<MaskedTextBoxComponent type="password" name="mask"></MaskedTextBoxComponent> |
| Triggers on key press | Event: keyPress

<EJ.MaskEdit id="mask" maskFormat="0000" keyPress={this.keyPress}></EJ.MaskEdit>

script
keyPress: function() {} | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keypress',function(){});
} |
| Triggers on key up | Event: keyUp

<EJ.MaskEdit id="mask" maskFormat="0000" keyUp={this.keyUp}></EJ.MaskEdit>

script
keyUp: function() {} | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keyup',function(){});
} |
| Triggers on mouse out in maskedit control | Event: mouseOut

<EJ.MaskEdit id="mask" maskFormat="0000-000" mouseOut={this.onMouseOut}></EJ.MaskEdit>

script
onMouseOut: function() {} | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('mouseout',function(){}
);
} |
| Triggers when mouse over in maskedit control | Event: mouseOver

<EJ.MaskEdit id="mask" maskFormat="00-00" mouseOver={this.onMouseOver}></EJ.MaskEdit>

script
onMouseOver: function() {} | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('mouseover',function(){});
} |
| Name of maskedit control | Property: name

<EJ.MaskEdit id="mask" maskFormat="0000" name="pin"></EJ.MaskEdit> | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent> |
| Triggers on keydown | Event: onKeyDown

<EJ.MaskEdit id="mask" maskFormat="9999-9999" onKeyDown={this.onKeyDown}></EJ.MaskEdit>

script
onKeyDown: function() {} | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keydown',function(){});
} |
| Read only | Property: readOnly

<EJ.MaskEdit id="mask" maskFormat="99-999" readOnly={true}></EJ.MaskEdit> | Can be achieved by
<MaskedTextBoxComponent mask='000-000-0000' enabled={false}></MaskedTextBoxComponent>
CSS
.e-mask{
background-image: none !important ;
border-bottom-color: rgba(0, 0, 0, 0.42) !important ;
} |
| Right to left | Property: textAlign

<EJ.MaskEdit id="mask" maskFormat="9999" textAlign="Right"></EJ.MaskEdit> | Property: enableRtl

<MaskedTextBoxComponent id="mask" mask='9999' enableRtl = true></MaskedTextBoxComponent> |
| Sets width | Property: width

<EJ.MaskEdit id="mask" maskFormat="0000" width="100px"></EJ.MaskEdit> | Property: width

<MaskedTextBoxComponent id="mask" mask='0000' width ="100px"></MaskedTextBoxComponent> |

Mask Configuration

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
| Triggers on value change | Event change

<EJ.MaskEdit id="mask" maskFormat="00-00" change={this.onChange}></EJ.MaskEdit>

script
onChange: function() {} | Event: change

<MaskedTextBoxComponent id="mask" mask='00-00' change={this.onChange.bind(this)}></MaskedTextBoxComponent>

public onChange() {} |
| Clears maskedit text/value | Method: clear

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear(); | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' value="1234"></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.value= ""; |
| Triggers on creation | Event: create

<EJ.MaskEdit id="mask" maskFormat="00-00" create={this.onCreate}></EJ.MaskEdit>

script
onCreate: function() {} | Event: created

<MaskedTextBoxComponent id="mask" mask='00-00' created={this.onCreated.bind(this)}></MaskedTextBoxComponent>

public onCreated() {} |
| Custom Character | Property: customCharacter

<EJ.MaskEdit id="mask" maskFormat="C-0000" customCharacter="#"></EJ.MaskEdit> | Property: customCharacters

<MaskedTextBoxComponent id="mask" mask='C-0000' customCharacters= {this.chars}></MaskedTextBoxComponent>

public customCharacters: object = {C: '#'}; |
| Triggers when maskedit control is destroyed | Event: destroy

<EJ.MaskEdit id="mask" maskFormat="00-00" destroy={this.onDestroy}></EJ.MaskEdit>

script
onDestroy: function() {} | Event: destroyed

<MaskedTextBoxComponent id="mask" mask='00-00' destroyed={this.onDestroyed.bind(this)}></MaskedTextBoxComponent>

public onDestroyed() {} |
| Placeholder float type | Not Applicable | Property: floatLabelType

<MaskedTextBoxComponent id="mask" mask='9,999' placeholder="Enter value" floatLabelType="Auto"></MaskedTextBoxComponent> |
| Gets pure value of maskedit control | Method: get_StrippedValue

<EJ.MaskEdit id="mask" maskFormat="0000" value={123}></EJ.MaskEdit>

script
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue(); | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
alert(mask.value); |
| Get whole maskedit value | Method: get_UnstrippedValue

<EJ.MaskEdit id="mask" maskFormat="00-00" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue(); | Method: getMaskedValue

script
<MaskedTextBoxComponent id="mask" mask='00-00' value="1234"></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.getMaskedValue(); |
| Hides prompt character on focus out | Property: hidePromptOnLeave

<EJ.MaskEdit id="mask" maskFormat="aaaa" hidePromptOnLeave={true}></EJ.MaskEdit> | Can be achieved by
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} focus={this.onfocus.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
Script
public onCreated(){
var maskObj = document.getElementById("mask");
maskObj.addEventListener('focusout',function(){
maskObj.ej2_instances[0].promptChar = " "
})'
}
public onfocus(){
var maskObj = document.getElementById("mask").ej2_instances[0];
maskObj.promptChar= "_";
} |
| Mask format | Property: maskFormat

<EJ.MaskEdit id="mask" maskFormat="99,999"></EJ.MaskEdit> | Property: mask

<MaskedTextBoxComponent id="mask" mask='99,999'></MaskedTextBoxComponent> |
| Prompt character | Not Applicable | Property: promptChar

<MaskedTextBoxComponent id="mask" mask='0000' promptChar="#"></MaskedTextBoxComponent> |
| Clear Button | Not Applicable | Property: showClearButton

<MaskedTextBoxComponent id="mask" mask='aaaa' showClearButton=true></MaskedTextBoxComponent> |
| Prompt character display | Property: showPromptChar

<EJ.MaskEdit id="mask" maskFormat="$99-999" showPromptChar={false}></EJ.MaskEdit> | Can be achieved using
<MaskedTextBoxComponent id="mask" mask='0000' promptChar=" "></MaskedTextBoxComponent> |
| Show rounded corner | Property: showRoundedCorner

<EJ.MaskEdit id="mask" maskFormat="0000" showRoundedCorner={true}></EJ.MaskEdit> | Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask1" placeholder="Numeric TextBox" cssClass = "e-style" floatLabelType="Always"> </MaskedTextBoxComponent>
CSS
#mask1{
border: 2px solid grey;
padding: 7px;
border-radius: 10px;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before, .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
background: none ;
}
|
| Value of maskedit control | Property: value

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit> | Property: value

<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent> |
| Displays hint on maskedit control | Property: watermarkText

<EJ.MaskEdit id="mask" maskFormat="9999" watermarkText="Enter value"></EJ.MaskEdit> | Property: placeholder

<MaskedTextBoxComponent id="mask" mask='9999' placeholder="Enter value"></MaskedTextBoxComponent> |

Validation

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
| Displays error until correct value is entered | Property: showError

<EJ.MaskEdit id="mask" maskFormat="99-999" showError={true}></EJ.MaskEdit> | MaskedTextBox by default shows error until the correct value is entered
<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent> |
| Validation message | Property: validationMessage

<EJ.MaskEdit id="mask" maskFormat="0000" validationRules= {validationRules} validationMessage= {validationMessage}></EJ.MaskEdit>

var validationRules = {required: {true}};
var validationMessage = {required: "Required value"}; | Validation can be performed using Form Validation
<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'mask_value': { numberValue: [required, 'Enter valid mobile number'] }
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
document.querySelector("#masktextbox").appendChild(errorElement);
}
};
let formObject: FormValidator = new FormValidator('#form-element', options);
HTML
<form id="form-element" class="form-horizontal">
<div id='masktextbox'></div>
</form> |
| Validation Rules | Property: validationRules

<EJ.MaskEdit id="mask" maskFormat="00-00" validationRules= {validationRules}></EJ.MaskEdit>

var validationRules = {required: {true}}; | Validation can be performed using Form Validation
<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'mask_value': { numberValue: [required, true] }
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
document.querySelector("#masktextbox").appendChild(errorElement);
}
};
let formObject: FormValidator = new FormValidator('#form-element', options);
HTML
<form id="form-element" class="form-horizontal">
<div id='masktextbox'></div>
</form> |