Ej1 api migration in React Maskedtextbox component
30 Jan 20235 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>
scriptfocusIn: 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>
scriptfocusOut: function() {}
| Event: blur<MaskedTextBoxComponent id="mask" mask='00-00' blur={this.onBlur.bind(this)}></MaskedTextBoxComponent>
scriptpublic 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>
scriptvar 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>
scriptkeyPress: 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>
scriptkeyUp: 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>
scriptonMouseOut: 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>
scriptonMouseOver: 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>
scriptonKeyDown: 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>
scriptonChange: 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>
scriptonCreate: 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>
scriptonDestroy: 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>
scriptvar 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>
Scriptpublic 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>
|