Migration from Essential JS 1

21 Feb 20229 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: css-class

<ej-mask-edit id="maskedit" mask-format="9999" input-mode="@InputMode.Text" css-class="custom"/>
 Property: cssClass

<ejs-maskedtextbox mask='9999' cssClass = "custom"></ejs-maskedtextbox>
Destroy editor Not Applicable Method: destroy

<ejs-maskedtextbox id="mask "mask='00-000'></ejs-maskedtextbox>

Script

var mask = document.getElementById('mask').ej2_instances[0]
mask.destroy();
Disable the maskedit control Method: disable

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/>

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable(); 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created= "onCreate"></ejs-maskedtextbox>
Script
function onCreate(){
var maskObj = this;
maskObj.enabled= false;
}
Enable the maskedit control Method: enable

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/>

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable(); 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created="onCreate" ></ejs-maskedtextbox>
Script
function onCreate{
var maskObj =this;
maskObj.enabled= true;
}
Control state Property: enabled

<ej-mask-edit id="mask" mask-format="00-000" input-mode="@InputMode.Text" enabled=false/> 		Property: enabled

<ejs-maskedtextbox id="mask" mask='00-000' enabled=false></ejs-maskedtextbox>
Persistence Property: enable-persistence

<ej-mask-edit id="mask" mask-format="00-000" input-mode="@InputMode.Text" enable-persistence=true/> 		Property: enablePersistence

<ejs-maskedtextbox id="mask" "mask='00-000' enablePersistence=true></ejs-maskedtextbox>
Triggers when editor is focused in Event: focus-in

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" focus-in="onFocus"/>

Script

function onFocus(){} 		Event: focus

<ejs-maskedtextbox id="mask" focus="onFocus" mask='0000'></ejs-maskedtextbox>
Script

function onFocus(){}
Triggers when editor is focused out Event: focus-out

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" focus-out="onFocusOut"/>

Script

function onFocusOut(){} 		Event: blur

<ejs-maskedtextbox id="mask" blur="onBlur" mask="000-000" value="1234"></ejs-maskedtextbox>

Script

function onBlur(){}
Sets height Property: height

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" height="30px"/> 		Can be achieved using,

<ejs-maskedtextbox id="mask" cssClass = "custom" mask='0000'></ejs-maskedtextbox>

Css

.e-maskedtextbox.custom{
height: 30px
}
HTML Attributes Property: html-attributes

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" html-attributes="htmlAttr"/>

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("name", "maskedtextbox");
}		 Can be achieved using
<ejs-maskedtextbox id="mask" created="onCreate" mask="99-999" value="1234" ></ejs-maskedtextbox>
Script
function onCreate{
this.element.setAttribute("name", "textbox")}
}
Specifies Input mode Property: input-mode

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Password"/> 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" type="password"></ejs-maskedtextbox>
Triggers on key press Event: key-press

<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" key-press="onKeyPress"/>

Script

function onKeyPress(){} 		Can be achieved using
<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox>
Script
function onCreate(args){
document.getElementById("mask").addEventListener("keypress", function () {}
});
}
Triggers on key up Event: key-up

<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" key-up="onKeyUp"/>

Script

function onKeyUp(){} 		Can be achieved using
<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox>
Script
function onCreate(args){
document.getElementById("mask").addEventListener("keyup", function () {}
});
}
Triggers on mouse out in maskedit control Event: mouse-out

<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" mouse-out="mouseOut"/>

Script

function mouseOut(){} 		Can be achieved using
<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox>
Script
function onCreate(args){
document.getElementById("mask").addEventListener("mouseout", function () {}});
Triggers when mouse over in maskedit control Event: mouse-over

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" mouse-over="mouseOver"/>

Script

function mouseOver(){} 		Can be achieved using
<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox>
Script
function onCreate(args){
document.getElementById("mask").addEventListener("mouseover", function () {}
});
}
Name of maskedit control Property: name

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" name="pin"/> 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="99-999" value="1234" ></ejs-maskedtextbox>
Triggers on keydown Event: on-key-down

<ej-mask-edit id="mask" mask-format="9999-9999" input-mode="@InputMode.Text" on-key-down="onKeyDown"/>

Script

function onKeyDown(){} 		Can be achieved using
<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox>
Script
function onCreate(args){
document.getElementById("mask").addEventListener("keydown", function () {}
});
}
Read only Property: read-only

<ej-mask-edit id="mask" mask-format="99-999" input-mode="@InputMode.Text" read-only=true/> 		Can be achieved using
<ejs-maskedtextbox id="mask" enabled=false mask='0000'></ejs-maskedtextbox>
CSS
.e-mask{
background-image: none !important;
border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}
Right to left Property: text-align

<ej-mask-edit id="mask" mask-format="9999" input-mode="@InputMode.Text" text-align="Right"/> 		Property: enableRtl

<ejs-maskedtextbox id="mask enableRtl = true mask='9999'></ejs-maskedtextbox>
Sets width Property: width

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" width="100px"/> 		Property: width

<ejs-maskedtextbox id="mask" width="100px" mask='0000'></ejs-maskedtextbox>

Mask Configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event change

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" change="onChange"/>

Script

function onChange(){} 		Event: change

<ejs-maskedtextbox id="mask" change="onChange" mask='00-00'></ejs-maskedtextbox>

Script

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

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/>

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear(); 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created="onCreate" ></ejs-maskedtextbox>
Script
function onCreate{
var maskObj = this;
maskObj.value= "";
}
Triggers on creation Event: create

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" create="onCreate"/>

Script

function onCreate(){} 		Event: created

<ejs-maskedtextbox id="mask" created="onCreated" mask='00-00'></ejs-maskedtextbox>

Script

function onCreated(){}
Custom Character Property: custom-character

<ej-mask-edit id="mask" mask-format="C-0000" input-mode="@InputMode.Text" custom-character="#"/> 		Property: customCharacters

<ejs-maskedtextbox id="mask" mask='C-0000' customCharacters= "ViewBag.cusObj"></ejs-maskedtextbox>

Controller

CustomCharacters customObj = new CustomCharacters();
customObj.C = "#";
ViewBag.cusObj = customObj;
Triggers when maskedit control is destroyed Event: destroy

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" destroy="onDestroy"/>

Script

function onDestroy(){} 		Event: destroyed

<ejs-maskedtextbox id="mask" destroyed="onDestroy" mask='00-00'></ejs-maskedtextbox>

Script

function onDestroy(){}
Placeholder float type Not Applicable Property: floatLabelType

<ejs-maskedtextbox id="mask" placeholder="Enter value" floatLabelType="Auto" mask='9999'></ejs-maskedtextbox>
Gets pure value of maskedit control Method: get_StrippedValue

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="123"/>

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue(); 		Can be achieved using
<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" ></ejs-maskedtextbox>
Script

var maskObj = document.getElementById("mask").ej2_instances[0];
alert(maskObj.value);
Get whole maskedit value Method: get_UnstrippedValue

<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" value="1234"/>

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue(); 		Method: getMaskedValue

<ejs-maskedtextbox id="mask" mask='00-00' value='1234' created="onCreate"></ejs-maskedtextbox>

Script

function onCreate(){
var mask = this
}
mask.getMaskedValue();
Hides prompt character on focus out Property: hide-prompt-on-leave

<ej-mask-edit id="mask" mask-format="aaaa" input-mode="@InputMode.Text" hide-prompt-on-leave=true/> 		Can be achieved by
<ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always" value="1234" created="onCreate" focus="Focus"></ejs-maskedtextbox>
Script
function Focus(args) {
this.promptChar = "_";
}
function onCreate(args) {
document.getElementById("mask1").addEventListener("focusout", function () {
this.ej2_instances[0].promptChar = " ";
});
}
Mask format Property: maskFormat

<ej-mask-edit id="mask" mask-format="99,999" input-mode="@InputMode.Text"/> 		Property: mask

<ejs-maskedtextbox id="mask" mask='99,999' ></ejs-maskedtextbox>
Prompt character Not Applicable Property: promptChar

<ejs-maskedtextbox id="mask" mask='0000' promptChar='#'></ejs-maskedtextbox>
Clear Button Not Applicable Property: showClearButton

<ejs-maskedtextbox id="mask" mask='0000' showClearButton=true></ejs-maskedtextbox>
Prompt character display Property: show-prompt-char

<ej-mask-edit id="mask" mask-format="$ 99-999" input-mode="@InputMode.Text" show-prompt-char=false/> 		Can be achieved using
<ejs-maskedtextbox id="mask" mask='0000' promptChar=' '></ejs-maskedtextbox>
Show rounded corner Property: show-rounded-corner

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" show-rounded-corner=true/> 		Can be achieved using
<ejs-maskedtextbox id="mask" mask='0000' value='1234' cssClass="e-style" floatLabelType= "Always"></ejs-maskedtextbox>
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-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/> 		Property: value

<ejs-maskedtextbox id="mask" mask='0000' value='1234'></ejs-maskedtextbox>
Displays hint on maskedit control Property: watermark-text

<ej-mask-edit id="mask" mask-format="9999" input-mode="@InputMode.Text" watermark-text="Enter value"/> 		Property: placeholder

<ejs-maskedtextbox id="mask" mask='9999' placeholder="Enter value"></ejs-maskedtextbox>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Displays error until correct value is entered Property: show-error

<ej-mask-edit id="mask" mask-format="99-999" input-mode="@InputMode.Text" show-error=true/> 		MaskedTextBox by default shows error until the correct value is entered
<ejs-maskedtextbox id="mask" mask='0000' value='1234'></ejs-maskedtextbox>
Validation message Property: validation-message

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" validation-rules="rule" validation-message="messages"/>

Script

@{
Dictionary<string, object> rule = new Dictionary<string, object>();
rule.Add("required",true);
Dictionary<string, object> messages = new Dictionary<string, object>();
messages.Add("required", "Required value");
} 		Can be achieved using Form Validator
<form id="form-element">
<ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always"></ejs-maskedtextbox>
<form>
Script
var customFn = function (args) {
var argsLength = args.element.ej2_instances[0].value.length;
if (argsLength == 0) {
return 0;
}
else return argsLength;
};
}
var options = {
rules: {
'mask_value': { maxLength: [customFn, 'Enter valid mobile number'] },
}
var formObject = new ej.inputs.FormValidator('#form-element', options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};
Validation Rules Property: validation-rules

<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" validation-rules="rule"/>

Script

@{
Dictionary<string, object> rule = new Dictionary<string, object>();
rule.Add("required",true);
} 		Can be achieved using Form Validator
<form id="form-element">
<ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always"></ejs-maskedtextbox>
<form>
Script
var options = {
rules: {
'mask_value': { required: [true] },
}
var formObject = new ej.inputs.FormValidator('#form-element', options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};