Migration from Essential JS 1

21 Feb 20228 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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).InputMode(InputMode.Text).CssClass(“custom”)		 Property: CssClass

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”).CssClass(“custom”).Render()
Destroy editor Not Applicable Method: destroy

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()

Script

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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable();		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= false
Enable the maskedit control Method: enable

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable();		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= true
Control state Property: enabled

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-000”).InputMode(InputMode.Text).Enabled(false)		 Property: Enabled

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Enabled(false).Render()
Persistence Property: EnablePersistence

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-000”).InputMode(InputMode.Text).EnablePersistence(true)		 Property: EnablePersistence

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).EnablePersistence(true).Render()
Triggers when editor is focused in Event: FocusIn

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).ClientSideEvents(s => s.FocusIn(“onFocus”))

Script

function onFocus(){}		 Event: Focus

@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Focus(“onFocus”)
Script
function onFocus(){}
Triggers when editor is focused out Event: FocusOut

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.FocusOut(“onFocusOut”))

Script

function onFocusOut(){}		 Event: Blur

@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).InputMode(InputMode.Text).Blur(“onBlur”)
Script
function onBlur(){}
Sets height Property: height

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Height(“30px”)		 Can be achieved using,

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”).CssClass(“custom”).Render()

Css

.e-maskedtextbox.custom{
height: 30px;
}
HTML Attributes Property: HtmlAttributes

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).HtmlAttributes(htmlAttr)

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add(“name”, “maskedtextbox”);
}		 Can be achieved by
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“name”, “textbox”);
}
Specifies Input mode Property: InputMode

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Password)		 Can be achieved by
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“type”, “password”);
}
Triggers on key press Event: KeyPress

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.KeyPress(“onKeyPress”))

Script

function onKeyPress(){}		 Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“keypress”, function () { });
}
Triggers on key up Event: KeyUp

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.KeyUp(“onKeyUp”))

Script

function onKeyUp(){}		 Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“keyup”, function () { });
}
Triggers on mouse out in maskedit control Event: MouseOut

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.MouseOut(“onMouseOut”))

Script

function onMouseOut(){}		 Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“mouseout”, function () { });
}
Triggers when mouse over in maskedit control Event: MouseOver

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.MouseOver(“onMouseOver”))

Script

function onMouseOver(){}		 Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“mouseover”, function () { });
}
Name of maskedit control Property: name

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Name(“pin”)		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“name”, “TextBox”)
}
});
Triggers on keydown Event: OnKeyDown

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999-9999”).InputMode(InputMode.Text).ClientSideEvents(s => s.OnKeyDown(“keyDown”))

Script

function keyDown(){}		 Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“keydown”, function () { });
}
Read only Property: ReadOnly

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).InputMode(InputMode.Text).ReadOnly(true)		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Enabled(false).Mask(“0000”).Render()
Css
.e-mask{
background-image: none !important;
border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}
Right to left Property: TextAlign

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).InputMode(InputMode.Text).TextAlign(“Right”)		 Property: EnableRtl

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”).EnableRtl(true).Render()
Sets width Property: width

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Width(“100px”)		 Property: Width

@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Width(“100px”).Render()

Mask Configuration

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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Change(“onChange”))

Script

function onChange(){}		 Event: Change

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-00”).Change(“onChange”).Render()

Script

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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear();		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Value(“1234”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.value = ““
Triggers on creation Event: Create

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Create(“onCreate”))

Script

function onCreate(){}		 Event: Created

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-00”).Created(“onCreated”).Render()

Script

function onCreated(){}
Custom Character Property: CustomCharacter

@Html.EJ().MaskEdit(“mask”).MaskFormat(“C-0000”).InputMode(InputMode.Text).CustomCharacter(“#”)		 Property: CustomCharacters

@Html.EJS().MaskedTextBox(“mask”).Mask(“C-0000”).CustomCharacters(ViewBag.cusObj).Render()

Controller

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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Destroy(“onDestroy”))

Script

function onDestroy(){}		 Event: Destroyed

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-00”).Destroyed(“onDestroy”).Render()

Script

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

@Html.EJS().MaskedTextBox(“mask”).Mask(“9,999”).Placeholder(“Enter value”).FloatLabelType(“Auto”).Render()
Gets pure value of maskedit control Method: get_StrippedValue

@Html.EJ().MaskEdit(“mask”).Mask(“000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue();		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Value(“1234”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
alert(maskObj.value)
Get whole maskedit value Method: get_UnstrippedValue

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).Value(“1234”).InputMode(InputMode.Text)

Script

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

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()

Script

var mask = document.getElementById(‘mask’).ej2_instances[0]
mask.getMaskedValue();
Hides prompt character on focus out Property: HidePromptOnLeave

@Html.EJ().MaskEdit(“mask”).MaskFormat(“aaaa”).InputMode(InputMode.Text).HidePromptOnLeave(true)		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Focus(“onFocus”).Render()
Script
function onCreate() {
var maskObj = this;
document.getElementById(“mask”).addEventListener(“focusout”, function () {
maskObj.promptChar = “ “;
});
}
function onFocus() {
this.promptChar = “_”;
}
Mask format Property: maskFormat

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99,999”)		 Property: mask

@Html.EJS().MaskedTextBox(“mask”).Mask(“99,999”).Render()
Prompt character Not Applicable Property: PromptChar

@Html.EJS().MaskedTextBox(“mask”).Mask(“99,999”).PromptChar(“#”).Render()
Clear Button Not Applicable Property: ShowClearButton

@Html.EJS().MaskedTextBox(“mask”).Mask(“99,999”).ShowClearButton(true).Render()
Prompt character display Property: ShowPromptChar

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).ShowPromptChar(false)		 @Html.EJS().MaskedTextBox(“mask”).Mask(“99999”).PromptChar(“#”).Render()
Show rounded corner Property: ShowRoundedCorner

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ShowRoundedCorner(true)		 Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Render()
Css
#mask {
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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”)		 Property: value

@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Value(“1234”).Render()
Displays hint on maskedit control Property: WatermarkText

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).WatermarkText(“Enter value”)		 Property: Placeholder

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”).Placeholder(“Enter value”).Render()

Validation

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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).ShowError(true)		 MaskedTextBox by default shows error until correct value is entered
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Render()
Validation message Property: validation-message

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ValidationRules(rule => rule.AddRule(“required”, true)).ValidationMessage(msg => msg.AddMessage(“required”, “Required value”))		 Validation in MaskedTextBox can be achieved by Form validation
<form id=”form-element”>
@Html.EJS().MaskedTextBox(“mask”).Mask(“000-000-0000”).Placeholder(“Mobile Number”).FloatLabelType(FloatLabelType.Always).Created(“onCreate”).Render()
</form>
Script
var options = {
rules: {
‘mask’: { required: [true, ‘Enter valid mobile number’] },
},
};
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function (element, errorElement) {
document.querySelector(“#mask”).parentNode.appendChild(errorElement);
};
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “mask”);
}
Validation Rules Property: validation-rules

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ValidationRules(rule => rule.AddRule(“required”, true))		 Validation in MaskedTextBox can be achieved by Form validation
<form id=”form-element”>
@Html.EJS().MaskedTextBox(“mask”).Mask(“000-000-0000”).Placeholder(“Mobile Number”).FloatLabelType(FloatLabelType.Always).Created(“onCreate”).Render()
</form>
Script
var options = {
rules: {
‘mask’: { required: [true] },
},
};
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function (element, errorElement) {
document.querySelector(“#mask”).parentNode.appendChild(errorElement);
};
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “mask”);
}